/* DPX v0.6.5 approved final presentation layer. Loaded after every inherited stylesheet. */

/* Patch 1: no view-swap control. */
#swapPanelsBtn, .dpx-swap-btn, #hideTradingAreaBtn, .dpx-hide-trading-btn { display: none !important; }
body.manual-trend-swapped { /* neutralize stale browser classes from v0.6.4 */ }

/* Patches 3-5: compact account strip and balanced top-section heights. */
.hero {
  min-height: 58px !important;
  padding: 8px 14px !important;
  grid-template-columns: minmax(120px, .65fr) minmax(170px, .8fr) minmax(220px, 1fr) !important;
  gap: 10px !important;
}
.hero h1 { font-size: clamp(24px, 2.25vw, 38px) !important; line-height: 1 !important; }
.hero .app-version { font-size: .31em !important; }
.hero .market-price-panel #livePrice { font-size: clamp(18px, 1.65vw, 28px) !important; }
.hero .market-price-label { font-size: 10px !important; }
.dpx-brand-reset { cursor: pointer; border-radius: 8px; }
.dpx-brand-reset:focus-visible { outline: 2px solid #74d8ff; outline-offset: 3px; }
.compact-account-strip.session-bar {
  display: grid !important;
  grid-template-columns: minmax(230px, 1.25fr) minmax(145px, .62fr) minmax(155px, .7fr) minmax(155px, .7fr) !important;
  align-items: stretch !important;
  gap: 0 !important;
  min-height: 64px !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.compact-account-strip > * { min-width: 0 !important; }
.compact-account-strip .session-account-slot {
  display: flex !important; align-items: center !important; padding: 7px 12px !important;
  border-right: 1px solid rgba(112,168,211,.28);
}
.compact-account-strip #accountBar, .compact-account-strip .account-menu-wrap { width: 100% !important; }
.compact-account-strip .account-menu-btn {
  width: 100% !important; min-width: 0 !important; justify-content: flex-start !important;
  font-size: clamp(13px, 1.2vw, 19px) !important; padding: 7px 9px !important;
}
.compact-account-strip .account-menu-btn > span:nth-child(2) {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900;
}
.account-mode-badge {
  position: relative; display: grid !important; place-items: center; padding: 7px 22px 7px 12px;
  color: #fff; font-weight: 900; font-size: clamp(13px, 1.25vw, 20px); line-height: 1.12; text-align: center;
  border-right: 1px solid rgba(255,255,255,.24); clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 8% 50%);
}
.account-mode-badge.virtual-mode { background: linear-gradient(180deg,#173fae,#0b2e83); }
.account-mode-badge.coinbase-mode { background: linear-gradient(180deg,#c61a16,#8f0808); }
.compact-account-metric {
  display: flex !important; flex-direction: column; justify-content: center; align-items: center;
  gap: 2px; padding: 6px 10px !important; text-align: center;
}
.compact-account-metric + .compact-account-metric { border-left: 1px solid rgba(112,168,211,.24); }
.compact-account-metric span { color: #d9e8f7; font-size: clamp(11px, 1vw, 16px); }
.compact-account-metric strong { color: #fff; font-size: clamp(19px, 1.75vw, 30px); line-height: 1; white-space: nowrap; }
.account-mode-coinbase .compact-account-strip { background: linear-gradient(90deg,#12233a 0 49%,#7e2907 49% 100%) !important; }
.account-mode-virtual .compact-account-strip { background: linear-gradient(90deg,#12233a 0 49%,#0b2340 49% 100%) !important; }
.trade-heading .balance-row, .session-balance-slot, .coinbase-portfolio-card, .coinbase-real-money-warning { display: none !important; }


@media (min-width: 601px) {
  html body#dpxRoot.coinbase-real-mode .compact-account-strip.session-bar {
    display: grid !important;
    grid-template-columns: minmax(230px, 1.25fr) minmax(145px, .62fr) minmax(155px, .7fr) minmax(155px, .7fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important; gap: 0 !important;
    height: 64px !important; min-height: 64px !important; max-height: 64px !important;
  }
  html body#dpxRoot.coinbase-real-mode .compact-account-strip > * {
    grid-column: auto !important; grid-row: auto !important;
  }
  html body#dpxRoot.coinbase-real-mode .coinbase-real-money-warning { display: none !important; }
}

/* Patch 2: the approved images cover only their ordinary content areas. */
body.dpx-splash-in-page .trade-card, body.dpx-notice-visible #phoneHistoryPanel { overflow: hidden !important; }
body.dpx-splash-in-page .dpx-splash-screen { width: 100% !important; min-height: 0 !important; }
body.dpx-splash-in-page .dpx-splash-artboard { width: 100% !important; aspect-ratio: 1946 / 1272 !important; }
body.dpx-splash-in-page .dpx-message-artboard,
body.dpx-notice-visible .dpx-message-artboard { width: 100% !important; aspect-ratio: 1454 / 1036 !important; min-height: 0 !important; max-height: none !important; }
body.dpx-splash-in-page .dpx-message-artboard > img,
body.dpx-notice-visible .dpx-message-artboard > img { width: 100% !important; height: 100% !important; object-fit: contain !important; }

/* While the message cover is visible, it is the only visible child of the
   historical panel. This final selector intentionally overrides inherited
   phone-tab rules that otherwise reveal the ledger underneath the cover. */
html body.dpx-splash-in-page #phoneHistoryPanel > :not(#dpxMessageBoard),
html body.dpx-notice-visible #phoneHistoryPanel > :not(#dpxMessageBoard) { display: none !important; }
html body.dpx-splash-in-page #phoneHistoryPanel > #dpxMessageBoard,
html body.dpx-notice-visible #phoneHistoryPanel > #dpxMessageBoard { display: block !important; }

/* Patches 6-8: compact Historical Orders without display-only Side/Stake/Symbol/Control/Fee columns. */
#ledgerTable .ledger-col-side,
#ledgerTable .ledger-col-stake,
#ledgerTable .ledger-col-symbol,
#ledgerTable .ledger-col-brokerControl,
#ledgerTable .ledger-col-brokerFees { display: none !important; }
#ledgerTable .ledger-trade-side-stack,
#ledgerTable .phone-trade-stack,
#ledgerTable .dpx-pnl-status-stack { display: inline-grid !important; gap: 2px !important; align-content: center; line-height: 1.05; }
#ledgerTable .ledger-trade-side-stack b,
#ledgerTable .phone-trade-stack b { color: #eef7ff; font-weight: 900; }
#ledgerTable .ledger-side-direction { font-weight: 900 !important; }
#ledgerTable .ledger-side-direction.side-call { color: #51f39b !important; }
#ledgerTable .ledger-side-direction.side-put { color: #ff5b7a !important; }
#ledgerTable .ledger-side-direction.side-wait { color: #b8c7d8 !important; }
#ledgerTable .dpx-pnl-status-stack b { font-weight: 950; font-size: 1.08em; }
#ledgerTable .dpx-pnl-status-stack > span { color: #c2cedb; font-weight: 800; }
#ledgerTable .dpx-ledger-settle { min-width: 64px !important; padding: 6px 10px !important; font-weight: 900 !important; }
#ledgerTable .ledger-col-tradeSide { width: 105px !important; min-width: 105px !important; max-width: 105px !important; text-align: left !important; }
#ledgerTable .ledger-col-pnl { width: 94px !important; min-width: 94px !important; max-width: 94px !important; text-align: center !important; }
#ledgerTable .ledger-col-closeReason, #ledgerTable .reason-cell { width: 150px !important; min-width: 150px !important; max-width: 180px !important; text-align: center !important; white-space: normal !important; }
#ledgerTable .dpx-ledger-reason-text { display: block !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; line-height: 1.12 !important; }
#ledgerTable .ledger-col-tradeSide.sticky-col { left: 0 !important; z-index: 8 !important; }
#ledgerTable thead .ledger-col-tradeSide.sticky-col { z-index: 12 !important; }

@media (max-width: 900px) {
  .hero { min-height: 48px !important; padding: 5px 7px !important; grid-template-columns: minmax(78px,.48fr) minmax(110px,.72fr) minmax(130px,1fr) !important; gap: 5px !important; }
  .hero h1 { font-size: clamp(21px, 7vw, 31px) !important; }
  .hero .status-box { padding: 5px 7px !important; min-width: 0 !important; }
  .hero .status-box strong { font-size: clamp(9px, 2.7vw, 12px) !important; }
  .hero .status-box small { font-size: clamp(7px, 2vw, 10px) !important; }
  .hero .market-price-panel #livePrice { font-size: clamp(17px, 5vw, 23px) !important; }
  .compact-account-strip.session-bar {
    grid-template-columns: minmax(130px, 1.15fr) minmax(84px, .72fr) minmax(85px, .72fr) minmax(88px, .76fr) !important;
    min-height: 54px !important;
  }
  .compact-account-strip .session-account-slot { padding: 4px !important; }
  .compact-account-strip .account-menu-btn { padding: 4px !important; font-size: clamp(10px, 2.8vw, 14px) !important; }
  .compact-account-strip .avatar-dot { width: 26px !important; height: 26px !important; min-width: 26px !important; }
  .account-mode-badge { padding: 4px 11px 4px 6px; font-size: clamp(9px, 2.7vw, 13px); }
  .compact-account-metric { padding: 3px 2px !important; }
  .compact-account-metric span { font-size: clamp(8px, 2.1vw, 11px); }
  .compact-account-metric strong { font-size: clamp(13px, 3.6vw, 18px); }
}


/* Compact non-admin ledger for tablet and phone-landscape widths. The full
   eight-column laptop layout remains visible without clipping or horizontal
   scrolling, while admin prediction evidence keeps its existing scroll path. */
@media (min-width: 601px) and (max-width: 1100px) {
  html body#dpxRoot .compact-account-strip.session-bar {
    height: 46px !important; min-height: 46px !important; max-height: 46px !important; padding: 0 !important;
  }
  html body#dpxRoot.coinbase-real-mode .compact-account-strip.session-bar {
    height: 46px !important; min-height: 46px !important; max-height: 46px !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }
  html body#dpxRoot .compact-account-strip .session-account-slot { padding: 4px 8px !important; }
  html body#dpxRoot .compact-account-strip .account-mode-badge { padding: 4px 15px 4px 8px !important; }
  html body#dpxRoot .compact-account-strip .compact-account-metric { padding: 3px 6px !important; }
  html body#dpxRoot.desktop-tab-layout.user-normal.non-admin-ledger #ledgerTableWrap,
  html body#dpxRoot.desktop-tab-layout.user-normal.non-admin-ledger #ledgerTableWrap.no-h-scroll { overflow-x: hidden !important; }
  html body#dpxRoot.desktop-tab-layout.user-normal.non-admin-ledger #ledgerTableWrap table#ledgerTable {
    width: 100% !important; min-width: 100% !important; max-width: 100% !important;
    table-layout: fixed !important;
  }
  html body#dpxRoot.desktop-tab-layout.user-normal.non-admin-ledger #ledgerTableWrap table#ledgerTable th,
  html body#dpxRoot.desktop-tab-layout.user-normal.non-admin-ledger #ledgerTableWrap table#ledgerTable td {
    min-width: 0 !important; max-width: none !important; overflow: hidden !important;
    text-overflow: clip !important; padding: 5px 3px !important;
    font-size: clamp(8.2px, 1.05vw, 11px) !important;
  }
  html body#dpxRoot.desktop-tab-layout.user-normal.non-admin-ledger #ledgerTableWrap table#ledgerTable th { font-size: clamp(8px, 1.15vw, 11.5px) !important; }
  html body#dpxRoot.desktop-tab-layout.user-normal.non-admin-ledger #ledgerTableWrap table#ledgerTable .ledger-col-tradeSide { width: 11% !important; min-width: 0 !important; max-width: none !important; }
  html body#dpxRoot.desktop-tab-layout.user-normal.non-admin-ledger #ledgerTableWrap table#ledgerTable .ledger-col-entryExit { width: 12% !important; }
  html body#dpxRoot.desktop-tab-layout.user-normal.non-admin-ledger #ledgerTableWrap table#ledgerTable .ledger-col-stopLoss { width: 12% !important; }
  html body#dpxRoot.desktop-tab-layout.user-normal.non-admin-ledger #ledgerTableWrap table#ledgerTable .ledger-col-targetExit { width: 12% !important; }
  html body#dpxRoot.desktop-tab-layout.user-normal.non-admin-ledger #ledgerTableWrap table#ledgerTable .ledger-col-createdSettled { width: 17% !important; }
  html body#dpxRoot.desktop-tab-layout.user-normal.non-admin-ledger #ledgerTableWrap table#ledgerTable .ledger-col-duration { width: 10% !important; }
  html body#dpxRoot.desktop-tab-layout.user-normal.non-admin-ledger #ledgerTableWrap table#ledgerTable .ledger-col-pnl { width: 11% !important; min-width: 0 !important; max-width: none !important; }
  html body#dpxRoot.desktop-tab-layout.user-normal.non-admin-ledger #ledgerTableWrap table#ledgerTable .ledger-col-closeReason,
  html body#dpxRoot.desktop-tab-layout.user-normal.non-admin-ledger #ledgerTableWrap table#ledgerTable .reason-cell {
    width: 15% !important; min-width: 0 !important; max-width: none !important;
    overflow: visible !important; white-space: normal !important;
  }
  html body#dpxRoot.desktop-tab-layout.user-normal.non-admin-ledger #ledgerTableWrap table#ledgerTable .dpx-ledger-settle {
    min-width: 0 !important; max-width: 100% !important; padding: 5px 6px !important;
    font-size: clamp(8px, 1vw, 10px) !important;
  }
  html body#dpxRoot.desktop-tab-layout.user-normal.non-admin-ledger #ledgerTableWrap table#ledgerTable .dpx-ledger-reason-text {
    font-size: clamp(7.6px, .92vw, 10px) !important; overflow-wrap: anywhere !important;
  }
}


@media (min-width: 901px) and (max-width: 1100px) and (min-height: 601px) {
  html body#dpxRoot.desktop-tab-layout .trade-card #predictions.prediction-table-layout {
    flex: 0 0 206px !important; height: 206px !important; min-height: 206px !important; max-height: 206px !important;
    grid-template-columns: minmax(190px, 1fr) 78px 62px 52px 72px !important;
    grid-template-rows: 14px repeat(6, 31px) !important; row-gap: 1px !important; column-gap: 0 !important;
    align-content: start !important; overflow: hidden !important;
  }
  html body#dpxRoot.desktop-tab-layout .trade-card #predictions.prediction-table-layout .prediction-table-head,
  html body#dpxRoot.desktop-tab-layout .trade-card #predictions.prediction-table-layout .prediction-info-cell {
    min-width: 0 !important; max-width: none !important; width: auto !important;
    overflow: hidden !important; text-overflow: clip !important; white-space: nowrap !important;
    padding-inline: 2px !important; font-size: 9.5px !important;
  }
  html body#dpxRoot.desktop-tab-layout .trade-card #predictions.prediction-table-layout .prediction-action-cell,
  html body#dpxRoot.desktop-tab-layout .trade-card #predictions.prediction-table-layout .prediction-info-cell,
  html body#dpxRoot.desktop-tab-layout .trade-card #predictions.prediction-table-layout .prediction-action-wrap {
    min-height: 0 !important; height: 31px !important; max-height: 31px !important;
  }
}

@media (max-width: 600px) and (orientation: portrait) {
  html body.phone-tab-layout .app-shell { overflow-x: hidden !important; }
  html body.phone-tab-layout .compact-account-strip.session-bar {
    grid-template-columns: minmax(112px, 1.18fr) minmax(72px,.72fr) minmax(73px,.75fr) minmax(76px,.78fr) !important;
    min-height: 50px !important;
  }
  html body.phone-tab-layout .compact-account-strip .account-menu-btn { font-size: 9.5px !important; }
  html body.phone-tab-layout .account-mode-badge { font-size: 9px !important; line-height: 1.05 !important; }
  html body.phone-tab-layout .compact-account-metric span { font-size: 7.5px !important; }
  html body.phone-tab-layout .compact-account-metric strong { font-size: 13px !important; }
  html body.phone-tab-layout.dpx-phone-ledger-user #ledgerTable,
  html body.phone-tab-layout.dpx-phone-ledger-user #ledgerTableWrap table { width: 100% !important; min-width: 100% !important; table-layout: fixed !important; }
  html body.phone-tab-layout.dpx-phone-ledger-user #ledgerTable th,
  html body.phone-tab-layout.dpx-phone-ledger-user #ledgerTable td { min-width: 0 !important; max-width: none !important; padding: 5px 2px !important; overflow: hidden !important; }
  html body.phone-tab-layout.dpx-phone-ledger-user #ledgerTable .ledger-col-phoneTrade { width: 13% !important; }
  html body.phone-tab-layout.dpx-phone-ledger-user #ledgerTable .ledger-col-phoneInOut { width: 19% !important; }
  html body.phone-tab-layout.dpx-phone-ledger-user #ledgerTable .ledger-col-phoneTargetSl { width: 19% !important; }
  html body.phone-tab-layout.dpx-phone-ledger-user #ledgerTable .ledger-col-phoneMadeDone { width: 18% !important; }
  html body.phone-tab-layout.dpx-phone-ledger-user #ledgerTable .ledger-col-pnl { width: 13% !important; }
  html body.phone-tab-layout.dpx-phone-ledger-user #ledgerTable .ledger-col-closeReason,
  html body.phone-tab-layout.dpx-phone-ledger-user #ledgerTable .reason-cell { width: 18% !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; }
  html body.phone-tab-layout.dpx-phone-ledger-user #ledgerTable .dpx-ledger-settle {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    min-width: 0 !important; width: 100% !important; max-width: 100% !important;
    min-height: 24px !important; padding: 4px 1px !important; font-size: 8px !important;
    line-height: 1 !important; white-space: nowrap !important; color: #fff !important;
    text-indent: 0 !important; overflow: visible !important;
  }
  html body.phone-tab-layout.dpx-phone-ledger-user #ledgerTable .dpx-ledger-reason-text {
    font-size: 7.3px !important; line-height: 1.08 !important; white-space: normal !important;
    overflow-wrap: anywhere !important; word-break: normal !important;
  }
  html body.phone-tab-layout.dpx-phone-ledger-user #ledgerTable .dpx-pnl-status-stack b { font-size: 10px !important; }
  html body.phone-tab-layout.dpx-phone-ledger-user #ledgerTable .dpx-pnl-status-stack > span { font-size: 8px !important; }
  html body.phone-tab-layout.dpx-phone-ledger-user #ledgerTable .ledger-side-direction { font-size: 8.5px !important; }
  html body.phone-tab-layout.dpx-phone-ledger-user #ledgerTable .phone-trade-stack b { font-size: 8px !important; }
  body.dpx-splash-in-page .dpx-splash-artboard,
  body.dpx-splash-in-page .dpx-message-artboard,
  body.dpx-notice-visible .dpx-message-artboard { max-height: none !important; }
}

@media (orientation: landscape) and (max-height: 650px) {
  .hero { min-height: 42px !important; padding-block: 3px !important; }
  .compact-account-strip.session-bar { min-height: 46px !important; }
  .compact-account-metric strong { font-size: clamp(14px, 2.5vw, 20px) !important; }
  .account-mode-badge { font-size: clamp(10px, 2vw, 15px) !important; }
}