/* ============================================================================
 *  KINGDOM WEALTH — ONE SCROLLBAR PER DIALOG
 *  Load AFTER css/styles.css.  (Replaces the earlier version of this file.)
 *
 *  THE RULE
 *  --------
 *  A dialog gets exactly ONE scroll region, and it is inside the dialog. The
 *  dark overlay behind it never scrolls.
 *
 *  The previous version let the overlay scroll AND capped the panel, so a tall
 *  form ended up with a scrollbar on the panel and a second one on the overlay
 *  right next to it — two thin tracks a few pixels apart, the outer one nearly
 *  impossible to grab. That is fixed here: the panel is capped to the window and
 *  scrolls its own body; the overlay is overflow:hidden.
 *
 *  js/overlay-scroll.js enforces the same rule at runtime for any dialog not
 *  named below, and verifies afterwards that exactly one scroller survived.
 * ==========================================================================*/

/* ---------------------------------------------------------------------------
   1. Overlays: centre the dialog, never scroll.
   ------------------------------------------------------------------------- */
.policy-modal-overlay,
.modal-overlay,
.se-overlay,
.dr-overlay,
.cz-ov,
.ql-ov,
.imp-ov,
.ae2-ov,
.cam-ov,
.kwc-ov,
.gcal-ov,
.kc-pop-wrap,
.tra-ov,
[data-kw-overlay] {
  align-items: center;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* ---------------------------------------------------------------------------
   2. Panels: capped to the window, and a flex column so a header and a footer
      can stay put while the middle scrolls.
   ------------------------------------------------------------------------- */
.policy-modal-panel,
.modal,
.se-modal,
.dr-modal,
.cz-modal,
.ql-modal,
.imp-modal,
.ae2,
.cam-box,
.kwc-dlg,
.kc-pop,
.tra-modal,
[data-kw-panel] {
  margin: auto;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 36px);
  box-sizing: border-box;
}
@supports (height: 100dvh) {
  .policy-modal-panel,
  .modal,
  .se-modal,
  .dr-modal,
  .cz-modal,
  .ql-modal,
  .imp-modal,
  .ae2,
  .cam-box,
  .kwc-dlg,
  .kc-pop,
  .tra-modal,
  [data-kw-panel] { max-height: calc(100dvh - 36px); }
}

/* ---------------------------------------------------------------------------
   3. The single scroll region inside each dialog.
      These panels already ship a dedicated body element — it becomes the one
      scroller, so the dialog's own heading and buttons never move.
   ------------------------------------------------------------------------- */
.se-modal  > .se-body,
.cz-modal  > .cz-b,
.ql-modal  > .ql-mb,
.ae2       > .ae2-b,
.kwc-dlg   > .kwc-body,
.kc-pop    > .kc-ed-b,
.tra-modal > .tra-b {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;          /* drop the old 50vh / 62vh caps — flex handles it */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* everything else in those panels holds its natural height */
.se-modal  > :not(.se-body),
.cz-modal  > :not(.cz-b),
.ql-modal  > :not(.ql-mb),
.ae2       > :not(.ae2-b),
.kwc-dlg   > :not(.kwc-body),
.kc-pop    > :not(.kc-ed-b),
.tra-modal > :not(.tra-b) { flex: 0 0 auto; }

/* Panels with no dedicated body scroll themselves — still one scrollbar, and it
   sits inside the dialog's border where it reads as part of the dialog. */
.modal,
.dr-modal,
.imp-modal,
.policy-modal-panel {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal > *,
.dr-modal > *,
.imp-modal > * { flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   4. Add Policy — the reported bug. The panel is the scroller, with the title
      pinned at the top and Cancel / Save pinned at the bottom so the buttons
      can never end up off-screen.
   ------------------------------------------------------------------------- */
.policy-modal-panel > h3 {
  position: sticky; top: -24px; z-index: 3;
  margin: -24px -24px 14px; padding: 24px 24px 14px;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r) var(--r) 0 0;
}
.policy-modal-panel > .policy-modal-actions {
  position: sticky; bottom: -24px; z-index: 3;
  margin: auto -24px -24px; padding: 14px 24px 24px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r) var(--r);
}

/* very short windows: give the dialog every pixel there is */
@media (max-height: 560px) {
  .policy-modal-overlay,
  .modal-overlay,
  .se-overlay, .dr-overlay, .cz-ov, .ql-ov, .imp-ov, .ae2-ov, .cam-ov,
  .kwc-ov, .gcal-ov, .kc-pop-wrap, .tra-ov, [data-kw-overlay] { padding: 8px !important; }
  .policy-modal-panel, .modal, .se-modal, .dr-modal, .cz-modal, .ql-modal,
  .imp-modal, .ae2, .cam-box, .kwc-dlg, .kc-pop, .tra-modal, [data-kw-panel] { max-height: calc(100vh - 16px); }
}
@supports (height: 100dvh) {
  @media (max-height: 560px) {
    .policy-modal-panel, .modal, .se-modal, .dr-modal, .cz-modal, .ql-modal,
    .imp-modal, .ae2, .cam-box, .kwc-dlg, .kc-pop, .tra-modal, [data-kw-panel] { max-height: calc(100dvh - 16px); }
  }
}

/* ---------------------------------------------------------------------------
   5. Dynamic viewport units for the app shell, so a phone's address bar cannot
      hide the bottom of anything.
   ------------------------------------------------------------------------- */
@supports (height: 100dvh) {
  .app { height: 100dvh }
  .main { height: 100dvh }
  .sidebar { height: 100dvh }
}

/* ---------------------------------------------------------------------------
   6. Dropdown menus grow with their contents and had no height cap.
   ------------------------------------------------------------------------- */
.settings-menu,
.tb-manage-menu,
.kw-menu {
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@supports (height: 100dvh) {
  .settings-menu, .tb-manage-menu, .kw-menu { max-height: min(60dvh, 420px) }
}

/* ---------------------------------------------------------------------------
   7. Classes applied by js/overlay-scroll.js when it has to step in.
   ------------------------------------------------------------------------- */
.kw-one-scroll        { overflow: hidden !important; overscroll-behavior: contain; }
.kw-scroll-region     { overflow-y: auto !important; min-height: 0; overscroll-behavior: contain;
                        -webkit-overflow-scrolling: touch; }
.kw-scroll-fallback   { align-items: flex-start !important; overflow-y: auto !important; }

/* one tidy scrollbar everywhere, so the single remaining one looks deliberate */
.kw-scroll-region::-webkit-scrollbar,
.policy-modal-panel::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.dr-modal::-webkit-scrollbar,
.imp-modal::-webkit-scrollbar,
.se-body::-webkit-scrollbar,
.cz-b::-webkit-scrollbar,
.ql-mb::-webkit-scrollbar,
.ae2-b::-webkit-scrollbar,
.kwc-body::-webkit-scrollbar,
.kc-ed-b::-webkit-scrollbar,
.tra-b::-webkit-scrollbar { width: 10px }
.kw-scroll-region::-webkit-scrollbar-thumb,
.policy-modal-panel::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb,
.dr-modal::-webkit-scrollbar-thumb,
.imp-modal::-webkit-scrollbar-thumb,
.se-body::-webkit-scrollbar-thumb,
.cz-b::-webkit-scrollbar-thumb,
.ql-mb::-webkit-scrollbar-thumb,
.ae2-b::-webkit-scrollbar-thumb,
.tra-b::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 99px; border: 3px solid transparent;
                                  background-clip: content-box }
.kw-scroll-region::-webkit-scrollbar-track,
.policy-modal-panel::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track { background: transparent }

/* ---------------------------------------------------------------------------
   8. Long-form pages must never be height-locked.
   ------------------------------------------------------------------------- */
html.kw-scrollable, html.kw-scrollable body {
  overflow-y: auto !important; height: auto !important; min-height: 100%;
}