/* Journal page styles (charting PR 6).
 * Theme: GitHub-dark, matches the operator + reference pages.
 *
 * Loaded by /journal/ and /journal/<date>. The page-nav strip CSS is
 * inlined by monitoring._page_nav.PAGE_NAV_CSS for the operator + reference
 * pages, but for the journal pages we already control the head, so the
 * nav CSS is bundled here.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    background: #0d1117;
    color: #c9d1d9;
    padding: 16px;
    line-height: 1.5;
    max-width: 1280px;
    margin: 0 auto;
}

/* ── Page-nav strip (mirrors monitoring._page_nav.PAGE_NAV_CSS) ── */

.page-nav { display: flex; gap: 4px; margin-bottom: 12px; }
.page-nav-link {
    padding: 4px 12px; font-size: 11px; font-weight: 600;
    text-decoration: none; color: #8b949e; background: #161b22;
    border: 1px solid #21262d; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 1px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.page-nav-link:hover { color: #c9d1d9; background: #21262d; }
.page-nav-link.active { color: #58a6ff; background: #58a6ff15; border-color: #58a6ff44; }

/* ── Day-nav (prev / index / next) ── */

.day-nav {
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px; margin-bottom: 12px;
}
.day-nav-link {
    padding: 4px 12px; font-size: 11px; font-weight: 600;
    text-decoration: none; color: #c9d1d9; background: #161b22;
    border: 1px solid #21262d; border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.day-nav-link:hover { color: #58a6ff; background: #21262d; }
.day-nav-link.disabled {
    color: #484f58; background: #0d1117; border-style: dashed;
    cursor: not-allowed;
}
.day-nav-home { color: #8b949e; font-style: italic; }

/* ── Page header ── */

.header {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 1px solid #21262d; padding-bottom: 12px; margin-bottom: 16px;
}
.header h1 { font-size: 22px; color: #58a6ff; font-weight: 600; }
.header .meta { font-size: 12px; color: #8b949e; display: flex; gap: 8px; align-items: center; }
.header-pnl { font-weight: 700; font-size: 14px; }
.header-sep { color: #484f58; }

/* ── P&L colors (also used in cards + trade rows) ── */

.pnl-pos { color: #3fb950; }
.pnl-neg { color: #f85149; }
.pnl-zero { color: #8b949e; }

/* ── /journal/ index — cards ── */

.journal-index {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 900px) { .journal-index { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .journal-index { grid-template-columns: 1fr; } }

.journal-card {
    background: #161b22; border: 1px solid #21262d; border-radius: 6px;
    padding: 14px; text-decoration: none; color: inherit;
    display: flex; flex-direction: column; gap: 6px;
    transition: border-color 0.15s, transform 0.05s;
}
.journal-card:hover { border-color: #58a6ff44; }
.journal-card:active { transform: translateY(1px); }
.journal-card-date { font-size: 14px; color: #c9d1d9; font-weight: 600; }
.journal-card-pnl { font-size: 22px; font-weight: 700; }
.journal-card-meta {
    display: flex; justify-content: space-between;
    font-size: 11px; color: #8b949e;
}
.journal-card-wl { color: #c9d1d9; }
.journal-card-top { font-size: 11px; color: #8b949e; min-height: 1em; }

/* ── /journal/<date> — markdown body ── */

.journal-markdown {
    background: #161b22; border: 1px solid #21262d; border-radius: 6px;
    padding: 16px 20px; margin-bottom: 24px;
}
.journal-markdown h1 { font-size: 18px; color: #58a6ff; margin: 12px 0 8px; }
.journal-markdown h2 {
    font-size: 13px; color: #8b949e; text-transform: uppercase;
    letter-spacing: 1px; margin: 14px 0 6px; font-weight: 600;
}
.journal-markdown h3 { font-size: 12px; color: #c9d1d9; margin: 10px 0 4px; }
.journal-markdown p { margin: 6px 0; font-size: 12px; }
.journal-markdown ul, .journal-markdown ol { margin: 6px 0 6px 24px; font-size: 12px; }
.journal-markdown li { margin: 2px 0; }
.journal-markdown li strong { color: #c9d1d9; }
.journal-markdown code {
    background: #21262d; padding: 1px 4px; border-radius: 3px;
    font-size: 11px; color: #79c0ff;
}
.journal-markdown pre {
    background: #0d1117; padding: 10px 12px; border-radius: 4px;
    border: 1px solid #21262d; overflow-x: auto; font-size: 11px; margin: 8px 0;
}
.journal-markdown pre code { background: transparent; padding: 0; }
.journal-markdown blockquote {
    border-left: 3px solid #21262d; padding: 4px 12px;
    color: #8b949e; margin: 8px 0; font-size: 12px;
}
.journal-markdown table {
    border-collapse: collapse; font-size: 11px; margin: 8px 0;
}
.journal-markdown th, .journal-markdown td {
    padding: 4px 10px; border: 1px solid #21262d;
}
.journal-markdown th { background: #21262d; color: #8b949e; }

/* ── /journal/<date> — per-trade execution-chart blocks ── */

.journal-trades h2 {
    font-size: 13px; color: #8b949e; text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 12px; font-weight: 600;
}
.trade-block {
    background: #161b22; border: 1px solid #21262d; border-radius: 6px;
    padding: 12px; margin-bottom: 16px;
}
.trade-summary {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline;
    padding-bottom: 10px; border-bottom: 1px solid #21262d; margin-bottom: 10px;
    font-size: 12px;
}
.trade-strategy { color: #58a6ff; font-weight: 600; }
.trade-instrument {
    background: #58a6ff22; color: #58a6ff;
    padding: 1px 6px; border-radius: 3px; font-size: 10px;
    font-weight: 600; letter-spacing: 0.5px;
}
.trade-direction {
    padding: 1px 6px; border-radius: 3px; font-size: 10px;
    font-weight: 600; letter-spacing: 0.5px;
}
.trade-dir-long { background: #3fb95022; color: #3fb950; }
.trade-dir-short { background: #f8514922; color: #f85149; }
.trade-dir-other { background: #21262d; color: #8b949e; }
.trade-prices { color: #c9d1d9; font-family: inherit; }
.trade-pnl { font-weight: 700; font-size: 13px; margin-left: auto; }
.trade-exit-reason { color: #8b949e; font-size: 11px; font-style: italic; }
.trade-backfill-badge {
    background: #6e1b1b22; color: #d29922; padding: 1px 5px; border-radius: 3px;
    font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}

.trade-chart-container { background: #0d1117; border-radius: 4px; }

.chart-fallback-tap { cursor: pointer; }

/* ── Empty state ── */

.empty-state {
    color: #8b949e; font-style: italic; text-align: center;
    padding: 24px; background: #161b22; border: 1px dashed #21262d;
    border-radius: 6px;
}