/* Trade Calculator page. Relies on styles.css for :root variables, body
   reset, .icon sizing, fixed coffee/theme-toggle buttons, and the reused
   .keeper-search-wrapper / .keeper-list / .badge-* / .sleeper-sync-input
   classes from the Keepers feature -- this file only covers what's unique
   to this page: the header, the settings summary bar, and the two-column
   trade builder layout. */

.trade-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 96%;
    margin: 0 auto 8px;
    padding-top: 10px;
    text-align: center;
}

.trade-header h1 {
    /* inline-block so the gradient sweeps across just the text's own
       width, not the full centered container -- a block element here
       would sample only the gradient's washed-out middle (same bug fixed
       on the homepage title). */
    display: inline-block;
    margin: 0;
    color: var(--text);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(to right, #a78bfa, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.light-theme .trade-header h1 {
    background: linear-gradient(to right, #7c3aed, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill, 999px);
    padding: 5px 12px;
    text-decoration: none;
    transition: all 0.2s;
}
.nav-pill:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-highlight); }
.nav-pill .icon { width: 14px; height: 14px; }

.trade-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 24px 60px;
}

.trade-title-row { text-align: center; margin-bottom: 24px; }
.trade-title-row h2 { margin: 0 0 8px; font-size: 1.5rem; font-weight: 700; color: var(--text); }
.trade-title-row p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }

/* One bar holds everything: the league-settings summary + "Change
   settings" on the far left, and Reset Trade + Import League Settings on
   the far right (both global/shared components -- .clear-draft-btn is the
   same red highlight as the Draft Board's "Clear Draft", .sleeper-sync-box
   is the same toggle+panel as its "Import League Settings" -- reused here
   rather than redefined so this reads as the identical component, not a
   lookalike). #tradeSettingsBar (the JS-rendered summary text) is scoped
   to just the summary slot now, NOT the whole bar -- keeping Reset
   Trade/Import League Settings as static siblings outside that innerHTML
   swap means a settings change never wipes out an open Sleeper sync panel
   or an in-progress username entry out from under the user. */
.trade-settings-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    padding: 10px 16px;
    margin-bottom: 28px;
}
.trade-settings-bar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.trade-settings-bar-actions .sleeper-sync-box-inline { margin-left: 0; }
.trade-settings-bar-summary {
    font-size: 0.82rem;
    color: var(--text-muted);
    padding-top: 6px;
}
.trade-settings-bar-summary strong { color: var(--text); }
.trade-settings-change-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary);
    font-weight: 600;
    font-size: inherit;
    cursor: pointer;
    text-decoration: none;
}
.trade-settings-change-btn:hover { text-decoration: underline; }

/* Needs panel -- only revealed once a synced Sleeper league resolves to a
   roster owned by the synced username. Chip colors reuse the same
   --val-green/amber tokens used everywhere else in the app for good/needs-
   attention signaling, so "solid" and "needs" read consistently with e.g.
   the Value Bargain column on the Draft Board. */
.trade-needs-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    padding: 12px 16px;
    margin-bottom: 28px;
}
.trade-needs-toggle {
    /* Overrides the global label { text-transform: uppercase } rule (meant
       for short form-field labels like "QB") -- this label is a full
       sentence, which reads badly shouted in caps with letterspacing. */
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.trade-needs-toggle input { cursor: pointer; width: 15px; height: 15px; accent-color: var(--primary); }
.trade-needs-toggle strong { color: var(--text); }
.trade-needs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.trade-need-chip {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-pill, 999px);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: default;
}
.trade-need-chip-need { background: var(--val-amber-bg); color: var(--val-amber-txt); }
.trade-need-chip-solid { background: var(--val-green-bg); color: var(--val-green-txt); }
.trade-need-chip-neutral { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

.trade-verdict-needs-note { font-size: 0.66rem; color: var(--text-muted); margin-top: 8px; font-style: italic; }

/* Methodology transparency banner -- scoped reimplementation of
   Start/Sit's .ss-methodology-note (same visual treatment: accent-glow
   background, always visible rather than tucked in a modal, since knowing
   whether a trade is valued on real Rest-of-Season data or a season-long
   fallback directly affects how much to trust the verdict). */
.trade-methodology-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--accent-glow);
    border: 1px solid var(--primary);
    border-radius: var(--radius-md, 10px);
    padding: 10px 14px;
    margin-bottom: 20px;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.trade-methodology-note .icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; color: var(--primary); }

/* Once there's a real result, the whole verdict box becomes the "see
   calculation" click target -- hovering highlights the entire card (not
   just the text) so it reads as one clickable unit. */
.trade-verdict.trade-verdict-clickable {
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.trade-verdict.trade-verdict-clickable:hover,
.trade-verdict.trade-verdict-clickable:focus-visible {
    background: var(--accent-glow);
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
    outline: none;
}

/* Section headers inside the "How This Trade Was Calculated" modal --
   reuses the same look as the Data Status modal's group headers. */
.trade-calc-section-title { margin: 0 0 4px; font-size: 0.85rem; color: var(--text); font-weight: 700; }

.trade-settings-save-row { margin-top: 16px; }

.trade-builder {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: start;
}

.trade-side {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 14px);
    padding: 22px;
}
.trade-side h3 { margin: 0 0 14px; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.trade-side-sub { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); text-transform: none; }

/* Only shown once a Sleeper league has been synced (via the League
   Settings modal's "Sync via Sleeper" tab) and its team rosters were
   fetched -- lets you pick an actual team in your league and quick-add
   their real roster instead of searching player-by-player. */
.trade-team-picker-row { margin: 0 0 12px; }
.trade-team-picker {
    width: 100%;
    padding: 7px 10px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.trade-team-picker:hover { border-color: var(--border-highlight); }
.trade-team-picker-note {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Applied to the whole side box by calculateTrade() once "Calculate Trade"
   is clicked -- reuses the same --val-green/amber/red tokens the rest of
   the app already uses for good/fair/bad value coloring, so a winning side
   reads the same way a positive VORP number does elsewhere on the site. */
.trade-side.trade-side-win { background: var(--val-green-bg); border-color: var(--val-green-txt); transition: background 0.25s, border-color 0.25s; }
.trade-side.trade-side-fair { background: var(--val-amber-bg); border-color: var(--val-amber-txt); transition: background 0.25s, border-color 0.25s; }
.trade-side.trade-side-lose { background: var(--val-red-bg); border-color: var(--val-red-txt); transition: background 0.25s, border-color 0.25s; }

.trade-list-header {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    margin: 14px 0 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
/* .trade-list shares the .keeper-list class, which sets overflow-y: auto
   for its max-height scroll behavior. Per the CSS overflow spec, setting
   overflow-y to anything but visible forces overflow-x to auto too (you
   can't mix visible/non-visible on the two axes) -- so if the bleed below
   were on each row (margin: 0 -10px), that forced overflow-x: auto would
   clip off the sliver of each row (including its rounded corner) that
   bled past the container's own edge, leaving a hard square corner. The
   bleed lives on the container itself instead: a container's own negative
   margin against ITS parent is unaffected by the container's overflow
   property (overflow only clips descendants that exceed the container's
   own box), so this bleeds the same visual distance without ever clipping
   the rows inside it. */
.trade-list { min-height: 40px; margin: 0 -10px; }
.trade-list .empty-slot { padding: 0 10px; }

/* Both the added-player rows and the clickable search-result rows get a
   position-color-coded background (via the shared .pos-tint-* utility
   classes in styles.css) -- each row reads as its own colored "chip" now,
   so rounded corners replace the old row-separator border. */
.trade-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    margin: 0 0 4px;
    border-radius: 8px;
    font-size: 0.82rem;
}
.trade-list-row:last-child { margin-bottom: 0; }
.trade-list-name { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* .edge-badge (styles.css) supplies the clickable pill look shared with
   the Draft Board's Edge Score cells -- this just tightens it to fit the
   compact trade row instead of a full table cell. */
.trade-list-value { margin-left: 6px; font-size: 0.75rem; padding: 3px 7px; }

.keeper-search-results .trade-clickable-row {
    cursor: pointer;
    padding: 8px 10px;
    margin: 0 -10px 4px;
    border-radius: 8px;
    border-bottom: none;
    transition: filter 0.15s;
    /* Without these, clicking/tapping the row shows a square-cornered
       highlight over the rounded background: -webkit-tap-highlight-color
       is a rectangular overlay on mobile WebKit that ignores border-radius,
       and a quick click can also trigger the browser's rectangular text
       selection box. Both are irrelevant here since the whole row is just
       a click target, not selectable text. */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}
.keeper-search-results .trade-clickable-row:last-child { margin-bottom: 0; }
.trade-clickable-row:hover { filter: brightness(1.2); }
body.light-theme .trade-clickable-row:hover { filter: brightness(0.97); }

.trade-side-total {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}
.trade-side-total-adjusted {
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.trade-verdict-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 40px;
}

.calculate-trade-btn {
    padding: 0 20px;
    height: 36px;
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary-hover);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 10px var(--accent-glow);
    white-space: nowrap;
}
.calculate-trade-btn:hover { background: var(--primary-hover); transform: translateY(-1px); }

.trade-verdict {
    text-align: center;
    min-width: 130px;
    padding: 18px 14px;
    border-radius: var(--radius-lg, 14px);
    background: var(--surface);
    border: 1px solid var(--border);
}
.trade-verdict-label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); line-height: 1.4; }
.trade-verdict.trade-verdict-fair .trade-verdict-label { color: var(--text); }
.trade-verdict.trade-verdict-a .trade-verdict-label,
.trade-verdict.trade-verdict-b .trade-verdict-label { color: var(--val-green-txt); }
.trade-verdict-margin { font-size: 0.72rem; color: var(--text-muted); margin-top: 6px; }

@media (max-width: 900px) {
    .trade-builder { grid-template-columns: 1fr; }
    .trade-verdict-col { padding-top: 0; order: 3; }
    .trade-side[data-side="B"] { order: 2; }
}