/* Preview-only layout polish for the AURUM reference pass. */

/* Keep the workspace content close to the top bar. The native page-title
   block is duplicated by the workspace content, so it should not reserve a
   second title-sized gap on My Prop Journey pages. */
body:not(:has(#hero)) .pft-main .pft-content-page-heading {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body:not(:has(#hero)) .pft-main div:has(> .pft-content-page-heading) {
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body:not(:has(#hero)) .pft-main {
  padding-top: 82px !important;
}

/* Trade Journal top-level pages: remove the redundant title row while
   keeping page actions (such as Add Trade) available. Review/editor headers
   live deeper in the page and are intentionally left untouched. */
body:not(:has(#hero)) .pft-journal-preview > .journal-header {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  min-height: 0 !important;
}

body:not(:has(#hero)) .pft-journal-preview > .journal-header > :first-child {
  display: none !important;
}

body:not(:has(#hero)) .pft-journal-preview > .journal-header:has(.ap-analysis-controls) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) !important;
  align-items: center !important;
  column-gap: 18px !important;
  row-gap: 0 !important;
}

body:not(:has(#hero)) .pft-journal-preview > .journal-header:has(.ap-analysis-controls) > .ap-analysis-controls {
  grid-column: 1 / -1 !important;
  justify-content: flex-start !important;
  width: 100% !important;
}

/* The custom Trade Journal dashboard no longer needs a large title/date
   block above the cards. Keep the subtitle out of the flow as well. */
body:not(:has(#hero)) .pft-journal-preview > .fx-subtitle {
  display: none !important;
  margin: 0 !important;
}

/* Strategy and tag controls: consistent AURUM surfaces in both themes. */
body:not(:has(#hero)) .ap-analysis-controls {
  gap: 10px !important;
  align-items: center !important;
}

body:not(:has(#hero)) .ap-analysis-controls .ap-strategy-control {
  min-height: 42px !important;
  padding: 4px 5px 4px 12px !important;
  background: var(--aurum-panel-raised) !important;
  border: 1px solid var(--aurum-line) !important;
  border-radius: var(--aurum-radius) !important;
  box-shadow: none !important;
}

body:not(:has(#hero)) .ap-analysis-controls .ap-strategy-label {
  color: var(--aurum-muted) !important;
  border-color: var(--aurum-line) !important;
  padding-right: 10px !important;
}

body:not(:has(#hero)) .ap-analysis-controls .ap-strategy-label svg {
  color: var(--aurum-gold) !important;
}

body:not(:has(#hero)) .ap-analysis-controls .journal-strategy-picker {
  width: 154px !important;
  min-width: 154px !important;
}

body:not(:has(#hero)) .ap-analysis-controls .journal-strategy-picker > summary {
  height: 34px !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--aurum-white) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  font-size: 12px !important;
}

body:not(:has(#hero)) .ap-analysis-controls .pft-gold-options {
  background: var(--aurum-panel-raised) !important;
  border: 1px solid var(--aurum-line) !important;
  border-radius: var(--aurum-radius) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, .32) !important;
}

body:not(:has(#hero)) .ap-analysis-controls .pft-gold-options > button {
  color: var(--aurum-muted) !important;
}

body:not(:has(#hero)) .ap-analysis-controls .pft-gold-options > button:hover,
body:not(:has(#hero)) .ap-analysis-controls .pft-gold-options > button[aria-pressed="true"] {
  background: var(--aurum-gold-soft) !important;
  color: var(--aurum-gold) !important;
}

body:not(:has(#hero)) .ap-analysis-controls .ap-strategy-count {
  color: var(--aurum-gold) !important;
  background: var(--aurum-gold-soft) !important;
  border-color: var(--aurum-line) !important;
}

body.pft-force-light:not(:has(#hero)) .ap-analysis-controls .ap-strategy-control {
  background: #ffffff !important;
  border-color: #d9dee7 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06) !important;
}

body.pft-force-light:not(:has(#hero)) .ap-analysis-controls .ap-strategy-label {
  color: #526071 !important;
  border-color: #d9dee7 !important;
}

body.pft-force-light:not(:has(#hero)) .ap-analysis-controls .journal-strategy-picker > summary {
  color: #1f2937 !important;
  background: #f7f8fa !important;
}

body.pft-force-light:not(:has(#hero)) .ap-analysis-controls .pft-gold-options {
  background: #ffffff !important;
  border-color: #d9dee7 !important;
  box-shadow: 0 14px 35px rgba(15, 23, 42, .14) !important;
}

body.pft-force-light:not(:has(#hero)) .ap-analysis-controls .pft-gold-options > button {
  color: #344155 !important;
}

body.pft-force-light:not(:has(#hero)) .ap-analysis-controls .pft-gold-options > button:hover,
body.pft-force-light:not(:has(#hero)) .ap-analysis-controls .pft-gold-options > button[aria-pressed="true"] {
  background: #f4edd8 !important;
  color: #8a6813 !important;
}

body.pft-force-light:not(:has(#hero)) .ap-analysis-controls .ap-strategy-count {
  color: #8a6813 !important;
  background: #f4edd8 !important;
  border-color: #e6d7a6 !important;
}

/* Workspace selector: make the active My Prop Journey / Trade Journal tab
   unmistakable. The generic light-theme button rule used to flatten both
   tabs to white, hiding which workspace was selected. */
body:not(:has(#hero)) .pft-workspace-switch {
  background: var(--aurum-panel-raised) !important;
  border-color: var(--aurum-line) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22) !important;
}

body:not(:has(#hero)) .pft-workspace-switch button {
  position: relative !important;
  background: transparent !important;
  color: var(--aurum-muted) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

body:not(:has(#hero)) .pft-workspace-switch button[aria-pressed="true"] {
  background: var(--aurum-gold) !important;
  color: #11130f !important;
  border-color: var(--aurum-gold) !important;
  box-shadow: 0 0 0 1px rgba(216, 189, 105, .28), 0 5px 18px rgba(216, 189, 105, .28) !important;
  font-weight: 750 !important;
}

body:not(:has(#hero)) .pft-workspace-switch button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 3px;
  height: 2px;
  border-radius: 999px;
  background: rgba(17, 19, 15, .48);
}

body.pft-force-light:not(:has(#hero)) .pft-workspace-switch {
  background: #ffffff !important;
  border-color: #d9dee7 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .10) !important;
}

body.pft-force-light:not(:has(#hero)) .pft-workspace-switch button {
  background: transparent !important;
  color: #526071 !important;
}

body.pft-force-light:not(:has(#hero)) .pft-workspace-switch button:not(:disabled):not(.primary):not(.gold):not([data-primary="true"]):not(#add-trade):not(#save-journal):not(#save-trade):not(.journal-save-button) {
  background: transparent !important;
  color: #526071 !important;
}

body.pft-force-light:not(:has(#hero)) .pft-workspace-switch button[aria-pressed="true"]:not(:disabled):not(.primary):not(.gold):not([data-primary="true"]):not(#add-trade):not(#save-journal):not(#save-trade):not(.journal-save-button) {
  background: #c9a84c !important;
  color: #11130f !important;
  border-color: #c9a84c !important;
  box-shadow: 0 0 0 1px #c9a84c66, 0 5px 18px #c9a84c55 !important;
}

@media (min-width: 980px) {
  body:not(:has(#hero)) .pft-journal-preview > .journal-header:has(.ap-analysis-controls) > .ap-analysis-controls {
    grid-column: 2 !important;
    width: auto !important;
    justify-content: flex-end !important;
  }

  body:not(:has(#hero)) .pft-journal-preview > .journal-header:has(.ap-analysis-controls) > .ap-analysis-controls::before {
    content: "Strategy analysis";
    color: var(--aurum-muted);
    font-size: 12px;
    white-space: nowrap;
    margin-right: 2px;
  }
}

@media (max-width: 720px) {
  body:not(:has(#hero)) .pft-main {
    padding-top: 74px !important;
  }

  body:not(:has(#hero)) .pft-journal-preview > .journal-header:has(.ap-analysis-controls) {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  body:not(:has(#hero)) .pft-journal-preview > .journal-header:has(.ap-analysis-controls) > .ap-analysis-controls {
    width: 100% !important;
  }

  body:not(:has(#hero)) .ap-analysis-controls .ap-strategy-control {
    flex: 1 1 210px !important;
    min-width: 0 !important;
  }

  body:not(:has(#hero)) .ap-analysis-controls .journal-strategy-picker {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }
}

/* Sidebar parity: My Prop Journey and Trade Journal should share the same
   button geometry, hover response, and gold selected-state treatment. */
body:not(:has(#hero)) :is(.pft-sidebar, .journal-sidebar) {
  color: #526071 !important;
}

body:not(:has(#hero)) :is(.pft-sidebar button, .journal-sidebar .journal-nav button) {
  min-height: 46px !important;
  border-radius: 12px !important;
  border: 1px solid #d9dee7 !important;
  background: #ffffff !important;
  color: #526071 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .025) !important;
  transition: background-color 160ms ease, border-color 160ms ease,
    color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

body:not(:has(#hero)) :is(.pft-sidebar button:hover, .journal-sidebar .journal-nav button:hover) {
  background: #fbfaf5 !important;
  border-color: #e6d7a6 !important;
  color: #8a6813 !important;
  box-shadow: 0 4px 12px rgba(201, 168, 76, .12) !important;
}

body:not(:has(#hero)) :is(
  .pft-sidebar :is([aria-current="page"], .active, [data-active="true"]),
  .journal-sidebar .journal-nav button.active
) {
  background: #f4edd8 !important;
  border-color: #c9a84c !important;
  color: #111827 !important;
  box-shadow: inset 4px 0 0 #c9a84c, 0 0 0 1px #c9a84c33,
    0 5px 16px rgba(201, 168, 76, .16) !important;
}

body:not(:has(#hero)) :is(
  .pft-sidebar :is([aria-current="page"], .active, [data-active="true"]) svg,
  .journal-sidebar .journal-nav button.active svg
) {
  color: #c9a84c !important;
}

body.pft-force-light:not(:has(#hero)) .journal-sidebar {
  background: #f7f9fc !important;
  border-color: #d9dee7 !important;
}

body.pft-force-light:not(:has(#hero)) .journal-sidebar .journal-account-box {
  background: #ffffff !important;
  border-color: #d9dee7 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .025) !important;
}

body:not(.pft-force-light):not(:has(#hero)) :is(.pft-sidebar button, .journal-sidebar .journal-nav button) {
  background: #111820 !important;
  border-color: #2a3545 !important;
  color: #9ca7b7 !important;
  box-shadow: none !important;
}

body:not(.pft-force-light):not(:has(#hero)) :is(.pft-sidebar button:hover, .journal-sidebar .journal-nav button:hover) {
  background: #171f2a !important;
  border-color: #c9a84c66 !important;
  color: #c9a84c !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18) !important;
}

body:not(.pft-force-light):not(:has(#hero)) :is(
  .pft-sidebar :is([aria-current="page"], .active, [data-active="true"]),
  .journal-sidebar .journal-nav button.active
) {
  background: #c9a84c1f !important;
  border-color: #c9a84c !important;
  color: #edf0f5 !important;
  box-shadow: inset 4px 0 0 #c9a84c, 0 0 0 1px #c9a84c33,
    0 5px 16px rgba(201, 168, 76, .12) !important;
}

/* The native My Prop Journey navigation uses div-based side items rather
   than buttons, so include its actual data attributes in the same system. */
body:not(:has(#hero)) :is(
  .pft-sidebar [data-pft-side-group],
  .pft-sidebar [data-pft-side-active],
  .pft-sidebar [aria-label="Dashboard"],
  .pft-sidebar .pft-native-settings,
  .pft-sidebar [aria-label="Admin"]
) {
  min-height: 46px !important;
  border-radius: 12px !important;
  border: 1px solid #d9dee7 !important;
  background: #ffffff !important;
  color: #526071 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .025) !important;
  transition: background-color 160ms ease, border-color 160ms ease,
    color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

body:not(:has(#hero)) :is(
  .pft-sidebar [data-pft-side-group]:hover,
  .pft-sidebar [data-pft-side-active]:hover,
  .pft-sidebar [aria-label="Dashboard"]:hover,
  .pft-sidebar .pft-native-settings:hover,
  .pft-sidebar [aria-label="Admin"]:hover
) {
  background: #fbfaf5 !important;
  border-color: #e6d7a6 !important;
  color: #8a6813 !important;
  box-shadow: 0 4px 12px rgba(201, 168, 76, .12) !important;
}

body:not(:has(#hero)) :is(
  .pft-sidebar [data-pft-side-active="true"],
  .pft-sidebar [aria-current="page"],
  .pft-sidebar [data-active="true"]
) {
  background: #f4edd8 !important;
  border-color: #c9a84c !important;
  color: #111827 !important;
  box-shadow: inset 4px 0 0 #c9a84c, 0 0 0 1px #c9a84c33,
    0 5px 16px rgba(201, 168, 76, .16) !important;
}

/* The workspace navigation has its own group label, but the sidebar already
   makes the navigation grouping clear. Keep both workspaces compact by
   removing the redundant MAIN divider text. */
body:not(:has(#hero)) .pft-sidebar [data-pft-side-section="MAIN"],
body:not(:has(#hero)) .journal-sidebar .journal-label {
  display: none !important;
}

/* Give the first Dashboard destination a deliberate breathing space below
   the topbar rule now that the redundant MAIN label is gone. */
body:not(:has(#hero)) .pft-sidebar [aria-label="Dashboard"] {
  margin-top: 12px !important;
}

body:not(:has(#hero)) :is(
  .pft-sidebar [data-pft-side-active="true"] svg,
  .pft-sidebar [aria-current="page"] svg,
  .pft-sidebar [data-active="true"] svg
) {
  color: #c9a84c !important;
}

body:not(.pft-force-light):not(:has(#hero)) :is(
  .pft-sidebar [data-pft-side-group],
  .pft-sidebar [data-pft-side-active],
  .pft-sidebar [aria-label="Dashboard"],
  .pft-sidebar .pft-native-settings,
  .pft-sidebar [aria-label="Admin"]
) {
  background: #111820 !important;
  border-color: #2a3545 !important;
  color: #9ca7b7 !important;
  box-shadow: none !important;
}

body:not(.pft-force-light):not(:has(#hero)) :is(
  .pft-sidebar [data-pft-side-active="true"],
  .pft-sidebar [aria-current="page"],
  .pft-sidebar [data-active="true"]
) {
  background: #c9a84c1f !important;
  border-color: #c9a84c !important;
  color: #edf0f5 !important;
  box-shadow: inset 4px 0 0 #c9a84c, 0 0 0 1px #c9a84c33,
    0 5px 16px rgba(201, 168, 76, .12) !important;
}

/* Keep the Performance chart and Monthly P&L calendar on one clean baseline.
   The chart used to opt out of grid stretching, leaving a visible gap below
   it while the calendar continued to its natural height. */
body:not(:has(#hero)) .journal-dashboard-designed .fx-dashboard-grid {
  align-items: stretch !important;
}

body:not(:has(#hero)) .journal-dashboard-designed .fx-dashboard-grid > .journal-card:first-child {
  align-self: stretch !important;
  height: auto !important;
  min-height: 440px !important;
  box-sizing: border-box !important;
}

/* Calendar readability: reserve a clear top band for the date, then give the
   daily P&L and trade count their own centered rows so values never collide or
   get clipped inside a small day tile. */
body:not(:has(#hero)) .journal-dashboard-designed .calendar-seven-days {
  height: 340px !important;
  aspect-ratio: auto !important;
  gap: 7px !important;
  grid-template-rows: 24px repeat(var(--calendar-weeks, 5), minmax(0, 1fr)) !important;
}

body:not(:has(#hero)) .journal-dashboard-designed .calendar-seven-days .journal-day {
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 8px 6px 7px !important;
  display: block !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body:not(:has(#hero)) .journal-dashboard-designed .calendar-day-date {
  top: 8px !important;
  left: 9px !important;
  font-size: 13px !important;
  line-height: 16px !important;
  font-weight: 500 !important;
}

body:not(:has(#hero)) .journal-dashboard-designed .calendar-day-result {
  inset: 23px 4px 3px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body:not(:has(#hero)) .journal-dashboard-designed .calendar-day-result > span {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: clamp(10px, .72vw, 13px) !important;
  line-height: 12px !important;
  letter-spacing: -.25px !important;
  font-weight: 750 !important;
  flex: 0 0 auto !important;
}

body:not(:has(#hero)) .journal-dashboard-designed .calendar-day-result > small {
  display: block !important;
  margin: 0 !important;
  color: var(--dash-muted) !important;
  font-size: 10px !important;
  line-height: 11px !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

@media (max-width: 600px) {
  body:not(:has(#hero)) .journal-dashboard-designed .calendar-seven-days {
    height: 310px !important;
    gap: 4px !important;
    grid-template-rows: 22px repeat(var(--calendar-weeks, 5), minmax(0, 1fr)) !important;
  }

  body:not(:has(#hero)) .journal-dashboard-designed .calendar-seven-days .journal-day {
    padding: 6px 3px 5px !important;
  }

  body:not(:has(#hero)) .journal-dashboard-designed .calendar-day-date {
    top: 6px !important;
    left: 6px !important;
    font-size: 11px !important;
  }

  body:not(:has(#hero)) .journal-dashboard-designed .calendar-day-result {
    inset: 21px 1px 3px !important;
    gap: 1px !important;
  }

  body:not(:has(#hero)) .journal-dashboard-designed .calendar-day-result > span {
    font-size: 9px !important;
    line-height: 11px !important;
  }

  body:not(:has(#hero)) .journal-dashboard-designed .calendar-day-result > small {
    font-size: 9px !important;
    line-height: 10px !important;
  }
}

/* Journal workspace: remove the unused vertical air above the split view and
   keep the no-selection state from stretching into a large empty panel. The
   editor view remains full-height when a trade is selected. */
body:not(:has(#hero)):has(.fx-review-layout) .pft-main {
  padding-top: 78px !important;
}

body:not(:has(#hero)):has(.fx-review-layout) .pft-journal-preview {
  padding-top: 18px !important;
}

body:not(:has(#hero)):has(.fx-review-layout) .fx-review-layout:not(:has(.journal-editor-card)) {
  height: min(410px, calc(100dvh - 170px)) !important;
  min-height: 0 !important;
  align-items: start !important;
}

body:not(:has(#hero)):has(.fx-review-layout) .fx-review-layout:not(:has(.journal-editor-card)) > .fx-trade-list {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
}

body:not(:has(#hero)):has(.fx-review-layout) .fx-review-layout:not(:has(.journal-editor-card)) > .fx-journal-empty {
  height: 270px !important;
  min-height: 270px !important;
  max-height: 270px !important;
  align-self: start !important;
}

@media (max-width: 720px) {
  body:not(:has(#hero)):has(.fx-review-layout) .pft-main {
    padding-top: 72px !important;
  }

  body:not(:has(#hero)):has(.fx-review-layout) .pft-journal-preview {
    padding-top: 12px !important;
  }

  body:not(:has(#hero)):has(.fx-review-layout) .fx-review-layout:not(:has(.journal-editor-card)) {
    height: auto !important;
  }

  body:not(:has(#hero)):has(.fx-review-layout) .fx-review-layout:not(:has(.journal-editor-card)) > .fx-journal-empty {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }
}

/* Journal workspace: use the full viewport below the topbar so the trade
   list and journal panel do not stop early and leave a dead strip underneath. */
@media (min-width: 721px) {
  /* Journal owns the scroll on desktop. Keep the page shell and its hidden
     legacy content from moving when the editor is scrolled. */
  html:has(body.pft-journal-workspace):has(.pft-journal-preview .fx-review-layout),
  body.pft-journal-workspace:has(.pft-journal-preview .fx-review-layout),
  body.pft-journal-workspace:has(.pft-journal-preview .fx-review-layout) .pft-main {
    overflow: hidden !important;
  }

  body.pft-journal-workspace .pft-journal-preview:has(.fx-review-layout) {
    overflow: hidden !important;
  }

  body:not(:has(#hero)):has(.fx-review-layout) .fx-review-layout {
    height: calc(100dvh - 152px) !important;
    min-height: 0 !important;
  }

  body:not(:has(#hero)):has(.fx-review-layout) .fx-review-layout:not(:has(.journal-editor-card)) {
    height: calc(100dvh - 152px) !important;
    min-height: 0 !important;
  }

  body:not(:has(#hero)):has(.fx-review-layout) .fx-review-layout > .journal-card {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
  }

  body:not(:has(#hero)):has(.fx-review-layout) .fx-review-layout:not(:has(.journal-editor-card)) > .fx-journal-empty {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* In light mode the sticky review header must use the light surface as well;
   otherwise its dark text disappears against the inherited dark header. */
body.pft-force-light:not(:has(#hero)):has(.fx-review-layout) .fx-review-layout .journal-editor-card > .journal-header {
  background: #ffffff !important;
  border-color: #d9dee7 !important;
}

body.pft-force-light:not(:has(#hero)):has(.fx-review-layout) .fx-review-layout .journal-editor-card > .journal-header h2 {
  color: #111827 !important;
}

body.pft-force-light:not(:has(#hero)):has(.fx-review-layout) .fx-review-layout .journal-editor-card > .journal-header p {
  color: #738095 !important;
}

body.pft-force-light:not(:has(#hero)):has(.fx-review-layout) .fx-review-layout .fx-trade-list > small {
  background: #ffffff !important;
}

@media (max-width: 720px) {
  body:not(:has(#hero)):has(.fx-review-layout) .fx-review-layout > .journal-card {
    height: auto !important;
    max-height: none !important;
  }
}