/* transactions_report_v4.css — League Transactions viewer (Pro)
   Mockup: docs/mockups/transactions_viewer_v1.html. Tokens only. */

#transactionsReportModal .txr-backdrop {
    position: fixed; inset: 0;
    background: var(--jt-overlay-bg);
    backdrop-filter: var(--jt-overlay-blur);
    z-index: 10000;
}
#transactionsReportModal .txr-shell {
    position: fixed; inset: 0; z-index: 10001;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
#transactionsReportModal .txr-modal {
    pointer-events: auto;
    display: flex; flex-direction: column;
    width: min(1000px, 94vw); height: min(760px, 90vh);
    min-width: 560px; min-height: 380px;
    background: var(--jt-modal-bg);
    border: 1px solid var(--jt-modal-border);
    border-radius: 12px;
    box-shadow: var(--jt-modal-shadow);
    overflow: hidden;
}

/* header */
#transactionsReportModal .txr-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--jt-border-primary);
    cursor: grab; flex: none;
}
#transactionsReportModal .txr-title { font-size: .95rem; font-weight: 800; white-space: nowrap; }
#transactionsReportModal .txr-league {
    font-size: .7rem; color: var(--jt-text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#transactionsReportModal .txr-spacer { flex: 1; }
#transactionsReportModal .txr-close {
    width: 26px; height: 26px; border: none; background: transparent;
    color: var(--jt-text-secondary); font-size: 1rem; cursor: pointer; border-radius: 6px;
}
#transactionsReportModal .txr-close:hover { background: var(--jt-bg-hover); color: var(--jt-text-primary); }

/* ReportActions + minimize buttons: .ra-btn ships on-dark (white-chrome)
   styling for the gradient report headers. This header is a plain surface,
   so in light theme those buttons go white-on-white — flip them to
   dark-on-light, mirroring reports_v4.css's .ls-standalone-modal block. */
[data-theme="light"] #transactionsReportModal .txr-header .ra-btn,
[data-theme="light"] #transactionsReportModal .txr-header .ra-dl-trigger,
[data-theme="light"] #transactionsReportModal .txr-header .jt-mp-minimize-btn {
    background: var(--jt-bg-tertiary);
    color: var(--jt-text-secondary);
    border-color: var(--jt-border-primary);
}
[data-theme="light"] #transactionsReportModal .txr-header .ra-btn:hover,
[data-theme="light"] #transactionsReportModal .txr-header .ra-dl-trigger:hover,
[data-theme="light"] #transactionsReportModal .txr-header .jt-mp-minimize-btn:hover {
    background: var(--jt-bg-elevated);
    border-color: var(--jt-border-secondary);
    color: var(--jt-text-primary);
}

/* filters */
#transactionsReportModal .txr-filters {
    display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid var(--jt-border-primary);
    background: var(--jt-bg-secondary); flex: none;
}
#transactionsReportModal .txr-flabel {
    font-size: .62rem; text-transform: uppercase; letter-spacing: .6px;
    color: var(--jt-text-muted); font-weight: 700;
}
#transactionsReportModal .txr-sel,
#transactionsReportModal .txr-q {
    background: var(--jt-bg-tertiary); color: var(--jt-text-primary);
    border: 1px solid var(--jt-border-secondary); border-radius: 7px;
    padding: 4px 8px; font-size: .76rem;
}
#transactionsReportModal .txr-q { width: 160px; }
/* date/sort controls */
#transactionsReportModal .txr-date {
    background: var(--jt-bg-tertiary); color: var(--jt-text-primary);
    border: 1px solid var(--jt-border-secondary); border-radius: 7px;
    padding: 3px 6px; font-size: .72rem;
    color-scheme: dark;   /* native picker chrome follows the APP theme, not the OS */
}
[data-theme="light"] #transactionsReportModal .txr-date { color-scheme: light; }
#transactionsReportModal .txr-sort {
    background: var(--jt-bg-tertiary); color: var(--jt-text-primary);
    border: 1px solid var(--jt-border-secondary); border-radius: 7px;
    padding: 4px 9px; font-size: .7rem; font-weight: 700; cursor: pointer;
    white-space: nowrap;
}
#transactionsReportModal .txr-sort:hover { border-color: var(--jt-border-focus); }

/* summary strip — the tiles ARE the type filter buttons (same treatment as
   the Projections report). Type tiles toggle include/exclude (excluded =
   dimmed + "off"); the leading Moves tile flips All ↔ None; $ Spent stays
   informational. */
#transactionsReportModal .txr-summary {
    display: flex; gap: 7px; padding: 8px 14px; flex-wrap: wrap; flex: none;
    border-bottom: 1px solid var(--jt-border-primary);
}
#transactionsReportModal .txr-summary:empty { display: none; }
#transactionsReportModal .txr-stile {
    background: var(--jt-bg-secondary); border: 1px solid var(--jt-border-primary);
    border-radius: 8px; padding: 4px 12px 2px; text-align: center; min-width: 76px;
    cursor: pointer; font: inherit; color: inherit;
}
#transactionsReportModal .txr-stile:hover { border-color: var(--jt-border-focus); background: var(--jt-bg-tertiary); }
#transactionsReportModal .txr-stile.off { opacity: .45; }
#transactionsReportModal .txr-stile.off:hover { opacity: .8; }
#transactionsReportModal .txr-stile-info { cursor: default; }
#transactionsReportModal .txr-stile-info:hover { border-color: var(--jt-border-primary); background: var(--jt-bg-secondary); }
#transactionsReportModal .txr-sst {
    font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
    color: var(--jt-text-muted); min-height: .8em;
}
#transactionsReportModal .txr-sn { font-weight: 800; font-size: .95rem; }
#transactionsReportModal .txr-stile[data-tone="teal"]   .txr-sn { color: var(--jt-accent-teal); }
#transactionsReportModal .txr-stile[data-tone="amber"]  .txr-sn { color: var(--jt-accent-amber); }
#transactionsReportModal .txr-stile[data-tone="blue"]   .txr-sn { color: var(--jt-accent-blue); }
#transactionsReportModal .txr-stile[data-tone="green"]  .txr-sn { color: var(--jt-accent-green); }
#transactionsReportModal .txr-stile[data-tone="red"]    .txr-sn { color: var(--jt-accent-red); }
#transactionsReportModal .txr-stile[data-tone="purple"] .txr-sn { color: var(--jt-accent-purple-hover); }
#transactionsReportModal .txr-sl {
    font-size: .58rem; text-transform: uppercase; letter-spacing: .5px;
    color: var(--jt-text-secondary);
}

/* transaction list */
#transactionsReportModal .txr-body { flex: 1; overflow: auto; }
#transactionsReportModal .txr-day {
    position: sticky; top: 0; z-index: 2;
    background: var(--jt-bg-secondary);
    padding: 4px 14px; font-size: .64rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .8px;
    color: var(--jt-text-secondary);
    border-bottom: 1px solid var(--jt-border-primary);
}
#transactionsReportModal .txr-aday {
    color: var(--jt-accent-amber); background: var(--jt-accent-amber-bg);
    border-radius: 4px; padding: 0 6px; margin-left: 6px; letter-spacing: .5px;
}
#transactionsReportModal .txr-row {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 14px; font-size: .78rem;
    border-bottom: 1px solid var(--jt-border-primary);
}
#transactionsReportModal .txr-row:hover { background: var(--jt-bg-hover); }
#transactionsReportModal .txr-time {
    width: 58px; flex: none; color: var(--jt-text-muted); font-size: .64rem;
}
#transactionsReportModal .txr-badge {
    flex: none; width: 62px; text-align: center; border-radius: 5px; padding: 1px 0;
    font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
    border: 1px solid var(--jt-border-primary); color: var(--jt-text-secondary);
}
#transactionsReportModal .txr-badge[data-tone="teal"]   { color: var(--jt-combined-fg);   background: var(--jt-combined-bg);      border-color: var(--jt-combined-border); }
#transactionsReportModal .txr-badge[data-tone="amber"]  { color: var(--jt-accent-amber);  background: var(--jt-accent-amber-bg);  border-color: var(--jt-accent-amber); }
#transactionsReportModal .txr-badge[data-tone="blue"]   { color: var(--jt-accent-blue);   background: var(--jt-accent-blue-bg);   border-color: var(--jt-accent-blue); }
#transactionsReportModal .txr-badge[data-tone="green"]  { color: var(--jt-accent-green);  background: var(--jt-accent-green-bg);  border-color: var(--jt-accent-green); }
#transactionsReportModal .txr-badge[data-tone="red"]    { color: var(--jt-accent-red);    background: var(--jt-accent-red-bg);    border-color: var(--jt-accent-red); }
#transactionsReportModal .txr-badge[data-tone="purple"] { color: var(--jt-accent-purple-hover); background: var(--jt-accent-purple-bg); border-color: var(--jt-accent-purple-border); }
#transactionsReportModal .txr-fr {
    flex: none; width: 120px; font-weight: 700; font-size: .7rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#transactionsReportModal .txr-desc { flex: 1; min-width: 0; }
#transactionsReportModal .txr-pl { font-weight: 700; }
#transactionsReportModal .txr-meta { color: var(--jt-text-secondary); font-size: .7rem; }
#transactionsReportModal .txr-commish {
    color: var(--jt-accent-purple-hover); background: var(--jt-accent-purple-bg);
    border-radius: 4px; padding: 0 5px; font-size: .58rem; font-weight: 800;
    letter-spacing: .4px; vertical-align: 1px;
}
#transactionsReportModal .txr-cost {
    flex: none; width: 52px; text-align: right; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
#transactionsReportModal .txr-cost[data-tone="amber"] { color: var(--jt-accent-amber); }
#transactionsReportModal .txr-cost[data-tone="blue"]  { color: var(--jt-accent-blue); }
#transactionsReportModal .txr-more {
    flex: none; width: 22px; border: none; background: transparent;
    color: var(--jt-text-muted); cursor: pointer; font-size: .72rem;
}

/* expanded trade detail */
#transactionsReportModal .txr-tradex {
    display: grid; grid-template-columns: 1fr 30px 1fr; gap: 5px;
    margin: 0 14px 8px 152px;
    background: var(--jt-bg-secondary);
    border: 1px solid var(--jt-border-primary);
    border-radius: 9px; padding: 8px 12px; font-size: .72rem;
}
#transactionsReportModal .txr-side b {
    display: block; font-size: .6rem; text-transform: uppercase; letter-spacing: .5px;
    color: var(--jt-text-secondary); margin-bottom: 2px;
}
#transactionsReportModal .txr-arr {
    align-self: center; text-align: center;
    color: var(--jt-accent-teal); font-weight: 800;
}
#transactionsReportModal .txr-comments {
    grid-column: 1 / -1; color: var(--jt-text-muted); font-size: .68rem; font-style: italic;
}

/* footer / states */
#transactionsReportModal .txr-footer {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 14px; flex: none;
    border-top: 1px solid var(--jt-border-primary);
    font-size: .64rem; color: var(--jt-text-muted);
}
#transactionsReportModal .txr-empty {
    padding: 40px 20px; text-align: center;
    color: var(--jt-text-muted); font-size: .8rem;
}
#transactionsReportModal .txr-retry {
    background: var(--jt-bg-tertiary); color: var(--jt-text-primary);
    border: 1px solid var(--jt-border-secondary); border-radius: 7px;
    padding: 6px 14px; font-size: .74rem; font-weight: 700; cursor: pointer;
}

/* mobile */
@media (max-width: 640px) {
    #transactionsReportModal .txr-modal { width: 100vw; height: 100dvh; min-width: 0; border-radius: 0; }
    #transactionsReportModal .txr-fr { width: 84px; }
    #transactionsReportModal .txr-time { display: none; }
    #transactionsReportModal .txr-tradex { margin-left: 14px; }
    #transactionsReportModal .txr-q { width: 100%; }
}

/* print — the list is the artifact */
@media print {
    #transactionsReportModal .txr-filters,
    #transactionsReportModal .txr-actions-mount,
    #transactionsReportModal .txr-close,
    #transactionsReportModal .txr-more { display: none !important; }
    #transactionsReportModal .txr-modal { width: 100%; height: auto; box-shadow: none; }
    #transactionsReportModal .txr-body { overflow: visible; }
}