/* LEAN V11.20.40 — Asset Watermark Card System
   Asset identification moves from visible GOLD/BTC/FOREX badges to subtle background watermarks.
   Functional icons (plan, note, navigation, logo) are intentionally untouched. */

.day{position:relative!important;isolation:isolate!important;overflow:hidden!important;}
.day>*:not(.day-asset-watermarks){position:relative;z-index:2;}
.day-asset-watermarks{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  overflow:hidden!important;
}
.asset-watermark{
  position:absolute!important;
  display:grid!important;
  place-items:center!important;
  width:46%!important;
  aspect-ratio:1!important;
  opacity:.075!important;
  filter:saturate(.85)!important;
  transform:rotate(-5deg)!important;
}
.asset-watermark svg{width:100%!important;height:100%!important;fill:currentColor!important;}
.asset-watermark.is-gold{color:#f3c542!important;}
.asset-watermark.is-btc{color:#ff9f1c!important;font-weight:900!important;font-family:Arial,sans-serif!important;font-size:clamp(54px,7vw,118px)!important;line-height:1!important;}
.asset-watermark.is-forex{color:#75bfff!important;}
.day-asset-watermarks .wm-1{right:-4%;top:9%;}
.day-asset-watermarks.is-2 .wm-1{right:22%;top:10%;width:40%!important;}
.day-asset-watermarks.is-2 .wm-2{right:-9%;bottom:-7%;width:42%!important;}
.day-asset-watermarks.is-3 .wm-1{right:39%;top:7%;width:34%!important;}
.day-asset-watermarks.is-3 .wm-2{right:8%;top:12%;width:34%!important;}
.day-asset-watermarks.is-3 .wm-3{right:-12%;bottom:-8%;width:34%!important;}

/* Keep P/L status as the dominant semantic color. */
.day.profit,.day.win-day{background-image:linear-gradient(135deg,rgba(16,185,129,.11),rgba(4,12,18,.2))!important;}
.day.loss,.day.loss-day{background-image:linear-gradient(135deg,rgba(244,63,94,.10),rgba(4,12,18,.2))!important;}
.day.today,.day.no-trade{background-image:linear-gradient(135deg,rgba(245,194,30,.075),rgba(4,12,18,.12))!important;}

/* Mobile week cards: watermark should read clearly but stay behind content. */
@media (max-width:680px){
  .v3-calendar-wrap.calendar-mode-week .day-asset-watermarks .asset-watermark{
    opacity:.085!important;
    width:52%!important;
  }
  .v3-calendar-wrap.calendar-mode-week .day-asset-watermarks .asset-watermark.is-btc{
    font-size:72px!important;
  }
  /* Hide only asset identity icons in week cards. Functional plan/note icons remain. */
  .v3-calendar-wrap.calendar-mode-week .day-top-assets{display:none!important;}
  .v3-calendar-wrap.calendar-mode-week .day-journal-indicator{display:inline-grid!important;}
}

/* Desktop/month cards use a lighter watermark to protect compact text. */
@media (min-width:681px){
  .v3-calendar-wrap.calendar-mode-month .asset-watermark{opacity:.052!important;}
}


/* V11.20.40 — asset badge removal is global for calendar cards.
   Functional plan/note icons remain visible. */
.v3-calendar-wrap .day-top-assets{
  display:none!important;
}
.v3-calendar-wrap .day-journal-indicator{
  position:relative!important;
  z-index:4!important;
}


/* V11.20.40 — remove duplicated status badges on mobile week cards.
   Keep status/function icons only at the top of the card.
   Hide the repeated footer copy (best/worst, note/plan, etc.) */
@media (max-width:680px){
  .v3-calendar-wrap.calendar-mode-week .day-mobile-status{
    min-height:0!important;
    padding:0!important;
    margin-top:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .v3-calendar-wrap.calendar-mode-week .day-mobile-status .day-journal-indicator,
  .v3-calendar-wrap.calendar-mode-week .day-mobile-status .day-best-badge,
  .v3-calendar-wrap.calendar-mode-week .day-mobile-status .day-worst-badge,
  .v3-calendar-wrap.calendar-mode-week .day-mobile-status .day-highlight-badge,
  .v3-calendar-wrap.calendar-mode-week .day-mobile-status .day-status-badge,
  .v3-calendar-wrap.calendar-mode-week .day-mobile-status .badge-best,
  .v3-calendar-wrap.calendar-mode-week .day-mobile-status .badge-worst{
    display:none!important;
  }
  .v3-calendar-wrap.calendar-mode-week .day-mobile-status:empty{
    display:none!important;
  }

  /* Preserve the top badge row as the single source of truth. */
  .v3-calendar-wrap.calendar-mode-week .day-top-meta,
  .v3-calendar-wrap.calendar-mode-week .day-top-actions,
  .v3-calendar-wrap.calendar-mode-week .day-top-badges{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
  }
}


/* V11.20.40 — hide visible GOLD/BTC/FOREX text on calendar cards.
   Asset identity is now conveyed by the watermark background. */
.v3-calendar-wrap .day .day-symbol{
  display:none!important;
}
.v3-calendar-wrap .day .trade-mini{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
}
.v3-calendar-wrap .day .trade-mini:empty{
  display:none!important;
}

/* Keep no-trade card buttons and status clean on mobile week cards. */
@media (max-width:680px){
  .v3-calendar-wrap.calendar-mode-week .day .trade-mini{
    gap:6px!important;
  }
}


/* V11.20.40 — refined asset-watermark positioning
   1 asset: one large watermark.
   2 assets: balanced diagonal pair.
   3 assets: first asset is primary (large), remaining two are secondary. */

/* One asset */
.day-asset-watermarks.is-1 .wm-1{
  width:48%!important;
  right:-3%!important;
  top:16%!important;
  bottom:auto!important;
  transform:rotate(-5deg)!important;
}

/* Two assets */
.day-asset-watermarks.is-2 .wm-1{
  width:40%!important;
  right:24%!important;
  top:12%!important;
  bottom:auto!important;
  transform:rotate(-6deg)!important;
}
.day-asset-watermarks.is-2 .wm-2{
  width:38%!important;
  right:-6%!important;
  top:auto!important;
  bottom:-5%!important;
  transform:rotate(5deg)!important;
}

/* Three assets: first = primary, second/third = secondary */
.day-asset-watermarks.is-3 .wm-1{
  width:43%!important;
  right:22%!important;
  top:20%!important;
  bottom:auto!important;
  transform:rotate(-5deg)!important;
}
.day-asset-watermarks.is-3 .wm-2{
  width:27%!important;
  right:-3%!important;
  top:6%!important;
  bottom:auto!important;
  transform:rotate(5deg)!important;
}
.day-asset-watermarks.is-3 .wm-3{
  width:27%!important;
  right:-5%!important;
  top:auto!important;
  bottom:2%!important;
  transform:rotate(-8deg)!important;
}

/* Keep the hierarchy subtle so P/L remains dominant. */
.day-asset-watermarks.is-3 .wm-1{opacity:.080!important;}
.day-asset-watermarks.is-3 .wm-2,
.day-asset-watermarks.is-3 .wm-3{opacity:.060!important;}

@media (max-width:680px){
  .v3-calendar-wrap.calendar-mode-week .day-asset-watermarks.is-1 .wm-1{
    width:50%!important;
    right:-2%!important;
    top:18%!important;
  }

  .v3-calendar-wrap.calendar-mode-week .day-asset-watermarks.is-2 .wm-1{
    width:39%!important;
    right:25%!important;
    top:14%!important;
  }
  .v3-calendar-wrap.calendar-mode-week .day-asset-watermarks.is-2 .wm-2{
    width:36%!important;
    right:-4%!important;
    bottom:1%!important;
  }

  .v3-calendar-wrap.calendar-mode-week .day-asset-watermarks.is-3 .wm-1{
    width:42%!important;
    right:22%!important;
    top:24%!important;
  }
  .v3-calendar-wrap.calendar-mode-week .day-asset-watermarks.is-3 .wm-2{
    width:25%!important;
    right:-1%!important;
    top:9%!important;
  }
  .v3-calendar-wrap.calendar-mode-week .day-asset-watermarks.is-3 .wm-3{
    width:25%!important;
    right:-2%!important;
    bottom:4%!important;
  }
}


/* V11.20.40 — restore the compact GOLD / DXY / US2Y / PHIÊN strip on App.
   The market-context data/JS already existed; this makes it visible and compact
   in the redesigned mobile calendar without changing its TradingView/session logic. */
@media (max-width:680px){
  body [data-view="calendar"] #marketContextBar.market-context-bar{
    display:grid!important;
    grid-template-columns:82px minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:6px!important;
    width:100%!important;
    min-height:46px!important;
    height:46px!important;
    margin:0 0 7px!important;
    padding:5px!important;
    overflow:hidden!important;
    border:1px solid rgba(148,163,184,.20)!important;
    border-radius:11px!important;
    background:linear-gradient(90deg,#0b131d,#0a1119)!important;
    box-sizing:border-box!important;
  }

  body [data-view="calendar"] #marketContextBar .market-context-title{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    min-width:0!important;
    padding:0 6px!important;
    border:0!important;
    border-right:1px solid rgba(148,163,184,.17)!important;
  }
  body [data-view="calendar"] #marketContextBar .market-context-title>span{
    width:6px!important;
    height:6px!important;
    flex:0 0 6px!important;
  }
  body [data-view="calendar"] #marketContextBar .market-context-title div{
    display:grid!important;
    gap:1px!important;
    min-width:0!important;
  }
  body [data-view="calendar"] #marketContextBar .market-context-title strong{
    overflow:hidden!important;
    font-size:7.5px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }
  body [data-view="calendar"] #marketContextBar .market-context-title small{
    overflow:hidden!important;
    max-width:66px!important;
    font-size:5.3px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  body [data-view="calendar"] #marketContextItems.market-context-items{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:3px!important;
    min-width:0!important;
    overflow:visible!important;
  }
  body [data-view="calendar"] #marketContextItems article{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:12px 16px!important;
    align-items:center!important;
    gap:0 3px!important;
    min-width:0!important;
    min-height:34px!important;
    height:34px!important;
    padding:2px 4px!important;
    overflow:hidden!important;
    border-radius:7px!important;
    box-sizing:border-box!important;
  }
  body [data-view="calendar"] #marketContextItems article>span{
    grid-column:1!important;
    grid-row:1!important;
    min-height:0!important;
    color:#7f90a2!important;
    font-size:5.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  body [data-view="calendar"] #marketContextItems article>strong{
    grid-column:1/-1!important;
    grid-row:2!important;
    align-self:center!important;
    min-width:0!important;
    min-height:0!important;
    overflow:hidden!important;
    font-size:7.6px!important;
    line-height:1!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }
  body [data-view="calendar"] #marketContextItems article>small{
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:end!important;
    min-height:0!important;
    font-size:5.3px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  body [data-view="calendar"] #marketContextItems .market-session-card>strong{
    color:#f0c84b!important;
  }
}


/* V11.20.40 — mobile market-context visibility fix.
   Root cause: the compact 46px bar could clip #marketContextItems under the
   older mobile one-column market-context layout. Use an explicit 2-row mobile
   layout so GOLD/DXY/US2Y/PHIÊN are always visible. */
@media (max-width:680px){
  html body [data-view="calendar"] #marketContextBar.market-context-bar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:20px 38px!important;
    gap:4px!important;
    width:100%!important;
    height:68px!important;
    min-height:68px!important;
    max-height:68px!important;
    margin:0 0 7px!important;
    padding:5px 6px!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  html body [data-view="calendar"] #marketContextBar .market-context-title{
    grid-column:1!important;
    grid-row:1!important;
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
    height:20px!important;
    padding:0 3px!important;
    border:0!important;
  }
  html body [data-view="calendar"] #marketContextBar .market-context-title div{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    min-width:0!important;
  }
  html body [data-view="calendar"] #marketContextBar .market-context-title strong{
    flex:0 0 auto!important;
    font-size:7.5px!important;
    line-height:1!important;
  }
  html body [data-view="calendar"] #marketContextBar .market-context-title small{
    display:block!important;
    max-width:none!important;
    overflow:hidden!important;
    color:#708093!important;
    font-size:5.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  html body [data-view="calendar"] #marketContextItems.market-context-items{
    grid-column:1!important;
    grid-row:2!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:34px!important;
    gap:4px!important;
    width:100%!important;
    min-width:0!important;
    height:34px!important;
    min-height:34px!important;
    overflow:visible!important;
    visibility:visible!important;
    opacity:1!important;
  }
  html body [data-view="calendar"] #marketContextItems.market-context-items article{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:11px 17px!important;
    align-items:center!important;
    min-width:0!important;
    width:auto!important;
    height:34px!important;
    min-height:34px!important;
    margin:0!important;
    padding:2px 4px!important;
    overflow:hidden!important;
    visibility:visible!important;
    opacity:1!important;
    border:1px solid #263343!important;
    border-radius:7px!important;
    background:#0a1018!important;
    box-sizing:border-box!important;
  }
  html body [data-view="calendar"] #marketContextItems article>span{
    display:block!important;
    grid-column:1!important;
    grid-row:1!important;
    min-height:0!important;
    color:#7f90a2!important;
    font-size:5.4px!important;
    font-weight:900!important;
    line-height:1!important;
  }
  html body [data-view="calendar"] #marketContextItems article>small{
    display:block!important;
    grid-column:2!important;
    grid-row:1!important;
    justify-self:end!important;
    min-height:0!important;
    font-size:5.2px!important;
    line-height:1!important;
  }
  html body [data-view="calendar"] #marketContextItems article>strong{
    display:block!important;
    grid-column:1/-1!important;
    grid-row:2!important;
    align-self:center!important;
    min-width:0!important;
    min-height:0!important;
    overflow:hidden!important;
    color:#e7edf4!important;
    font-size:8px!important;
    font-weight:900!important;
    line-height:1!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }
  html body [data-view="calendar"] #marketContextItems .market-session-card>strong{
    color:#f0c84b!important;
  }
}


/* V11.20.40 — market cards remain visible even when TradingView returns a partial payload. */
@media (max-width:680px){
  html body [data-view="calendar"] #marketContextItems article.is-neutral{
    display:grid!important;
    opacity:1!important;
  }
  html body [data-view="calendar"] #marketContextItems article.is-neutral>strong{
    color:#aab7c6!important;
  }
}


/* V11.20.40 — Day Plan mobile modal viewport fix.
   The old sticky action bar overlaid the TRƯỚC/SAU image row and the dialog
   extended too close to the mobile browser/nav area. The dialog is now a
   fixed-height flex shell: header + independently scrollable content + static footer. */
@media (max-width:680px){
  html body #dayPlanModal.modal{
    align-items:flex-end!important;
    justify-content:center!important;
    padding:8px 8px max(10px,env(safe-area-inset-bottom))!important;
    overflow:hidden!important;
  }

  html body #dayPlanModal .day-plan-dialog{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:min(88dvh,760px)!important;
    max-height:calc(100dvh - 22px - env(safe-area-inset-bottom))!important;
    min-height:0!important;
    margin:0!important;
    overflow:hidden!important;
    border-radius:18px 18px 12px 12px!important;
  }

  html body #dayPlanModal .day-plan-dialog>.dialog-head{
    position:relative!important;
    top:auto!important;
    flex:0 0 auto!important;
    z-index:5!important;
  }

  html body #dayPlanModal .day-plan-form,
  html body #dayPlanModal .day-plan-viewer{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:18px!important;
  }

  html body #dayPlanModal .day-plan-view-content>div{
    max-height:none!important;
    overflow:visible!important;
  }

  html body #dayPlanModal .day-plan-view-images{
    flex:0 0 auto!important;
    padding-bottom:4px!important;
  }

  html body #dayPlanModal .day-plan-actions{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    flex:0 0 auto!important;
    margin:0!important;
    padding:8px 10px max(8px,env(safe-area-inset-bottom))!important;
    border-top:1px solid #263140!important;
    background:#0b1119!important;
    box-shadow:0 -8px 22px rgba(0,0,0,.22)!important;
    z-index:6!important;
  }

  /* Viewer mode: compact footer; it no longer covers the screenshots. */
  html body #dayPlanModal.is-view-mode .day-plan-actions{
    min-height:58px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
  }
  html body #dayPlanModal.is-view-mode .day-plan-actions .action-group{
    width:auto!important;
    margin-left:auto!important;
  }
  html body #dayPlanModal.is-view-mode .day-plan-actions .action-group .btn{
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
  }

  /* Give image row enough room to remain fully visible before footer. */
  html body #dayPlanModal .day-plan-view-image img{
    height:132px!important;
    max-height:132px!important;
    object-fit:cover!important;
  }
  html body #dayPlanModal .day-plan-view-image-empty{
    min-height:132px!important;
  }
}


/* V11.20.40 — lock Day Plan modal height; scroll only the plan content.
   Header, summary cards, image area and footer stay visually stable. */
@media (max-width:680px){
  html body #dayPlanModal .day-plan-dialog{
    height:min(88dvh,760px)!important;
    min-height:min(88dvh,760px)!important;
    max-height:min(88dvh,760px)!important;
    overflow:hidden!important;
  }

  html body #dayPlanModal .day-plan-viewer{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  html body #dayPlanModal .day-plan-view-summary{
    flex:0 0 auto!important;
  }

  /* Main plan text gets its own fixed viewport and vertical scrolling. */
  html body #dayPlanModal .day-plan-view-content{
    min-height:0!important;
    height:100%!important;
    max-height:none!important;
    overflow:hidden!important;
  }

  html body #dayPlanModal .day-plan-view-content>div{
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding-right:4px!important;
    scrollbar-gutter:stable!important;
  }

  /* Screenshot row remains outside the plan-text scroll area. */
  html body #dayPlanModal .day-plan-view-images{
    flex:0 0 auto!important;
    min-height:148px!important;
    max-height:148px!important;
    overflow:hidden!important;
    padding-top:8px!important;
  }

  html body #dayPlanModal .day-plan-view-image img{
    height:132px!important;
    max-height:132px!important;
  }

  /* Footer stays at the bottom and never covers the scroll region. */
  html body #dayPlanModal .day-plan-actions{
    flex:0 0 auto!important;
    position:relative!important;
    bottom:auto!important;
  }
}