/* journal.css — layout specific to journal.html. Shared tokens/components
   (colors, .tf-btn, tables, etc.) come from style.css, loaded first. */

/* Keeps style.css's shared 100vh fixed-viewport body (flex column) rather
   than overriding it to let the whole page scroll — the sidebar and main
   panel below are two independent scroll regions within that fixed height,
   so scrolling one never drags the other with it; see .journal-layout. */

.journal-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
}

.period-type-group,
.period-nav-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.journal-period-label {
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  min-width: 170px;
  text-align: center;
}

/* Stat tiles for the selected period — same win/loss metrics the Apps
   Script sheet computes, just queryable over any day/week/month instead of
   fixed per-strategy tabs. */
.journal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}

.stat-tile {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-tile-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-tile-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.stat-tile-value.pnl-positive { color: var(--up); }
.stat-tile-value.pnl-negative { color: var(--down); }

.journal-empty {
  color: var(--text-faint);
  text-align: center;
  padding: 48px 0;
}

/* Thumbnail rail (left) + the full-size entry cards (right), so a day's
   worth of trades can be scanned and jumped to without scrolling past every
   full chart first. Both are independent scroll regions (own overflow-y),
   not a shared page scroll — min-height: 0 is what lets a flex child
   actually scroll internally instead of growing to fit its content. */
.journal-layout {
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
}

.journal-sidebar {
  width: 560px;
  flex: 0 0 560px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
}

.journal-thumb {
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-panel);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  /* overflow: hidden drops a flex item's automatic min-height to 0, so with
     enough thumbnails to exceed the sidebar's height, flexbox was shrinking
     every one of them to cram the list in instead of letting the sidebar's
     own overflow-y: auto scroll — this is what made a busy day's thumbnails
     render squashed down to slivers while a single-trade day looked fine. */
  flex-shrink: 0;
}

.journal-thumb:hover {
  border-color: var(--text-dim);
}

.journal-thumb.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* The server-side capture (serverSnapshot.js) screenshots a fixed Puppeteer
   viewport, so every new journal image comes out ~1032x433 — wide and
   short, not square. A tall fixed-height box left most of it empty with
   object-fit: contain, reading as a near-blank box rather than a chart.
   Match the box to that real shape instead (doubled vs. the original
   natural-width size); contain stays on as a safety net for older entries
   captured client-side at other window sizes, so nothing still gets cropped. */
.journal-thumb img {
  width: 100%;
  aspect-ratio: 1032 / 433;
  object-fit: contain;
  display: block;
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
}

.journal-thumb-placeholder {
  aspect-ratio: 1032 / 433;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 11px;
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
}

/* flex-wrap, not a tight single row — at this larger text size, symbol +
   side + time + outcome don't reliably fit one line at the sidebar's width,
   and a taller thumbnail is fine (the image above stays the same size). */
.journal-thumb-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 8px 10px;
}

.journal-thumb-symbol {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal-thumb-side {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.journal-thumb-side.long { color: var(--up); }
.journal-thumb-side.short { color: var(--down); }

.journal-thumb-time {
  font-family: var(--font-mono);
  color: var(--text-faint);
  font-size: 13px;
}

/* Win/loss as text now, not the thumbnail's own border (which stays plain/
   blue-on-select only — see .journal-thumb.active above). Absent for a
   still-open trade (no mainClosedVia yet), same as the entry card's own
   winBadge(). */
.journal-thumb-outcome {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.journal-thumb-outcome.win { color: var(--up); }
.journal-thumb-outcome.loss { color: var(--down); }

.journal-list {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-right: 2px;
}

.journal-entry-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Date/time separator between trades, in the gap above each card. */
.journal-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.journal-divider::before,
.journal-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

@media (max-width: 720px) {
  /* Below this width the sidebar becomes a horizontal strip above the list
     (see .journal-sidebar overrides here) instead of a side-by-side column,
     so there's no vertical scroll to conflict with — let the whole page
     scroll normally again instead of two fixed-height internal regions. */
  body {
    height: auto;
    overflow-y: auto;
  }

  .journal-layout {
    flex-direction: column;
    min-height: 0;
  }

  .journal-sidebar {
    width: 100%;
    flex: none;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
  }

  .journal-list {
    overflow-y: visible;
  }

  .journal-thumb {
    flex: 0 0 220px;
  }
}

.journal-entry {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.journal-entry-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.journal-entry-symbol {
  font-weight: 700;
  font-size: 15px;
}

.journal-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.journal-badge.long { background: var(--up-bg); color: var(--up); }
.journal-badge.short { background: var(--down-bg); color: var(--down); }
.journal-badge.win { background: var(--up-bg); color: var(--up); }
.journal-badge.loss { background: var(--down-bg); color: var(--down); }
.journal-badge.open { background: var(--accent-bg); color: var(--accent); }
.journal-badge.playbook { background: var(--bg-input); color: var(--text-dim); }

.journal-entry-screenshots {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.journal-screenshot img {
  width: 100%;
  display: block;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  cursor: zoom-in;
}

.journal-screenshot-label {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-bottom: 4px;
}

.journal-screenshot-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
  color: var(--text-faint);
  font-size: 12px;
}

.journal-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
}

.journal-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.journal-fact-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.journal-fact-value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
}

.journal-legs {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.journal-leg {
  flex: 1 1 220px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.journal-leg-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.journal-leg-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.journal-notes textarea {
  width: 100%;
  min-height: 70px;
  resize: vertical;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.journal-notes textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.journal-notes-status {
  font-size: 11px;
  color: var(--text-faint);
  height: 14px;
}

/* Click-to-enlarge overlay, shared by every screenshot on the page. */
.journal-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
  padding: 32px;
  cursor: zoom-out;
}

.journal-lightbox.open {
  display: flex;
}

.journal-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}