/* Waiver Wire Advisor page. Relies on styles.css for :root variables, body
   reset, .icon sizing, fixed coffee/theme-toggle buttons, and the reused
   .edge-modal-* / .sleeper-sync-* / .data-status-pill / .pos-tint-* /
   .edge-badge / .keeper-result-pos classes shared across the whole app.
   Layout below is a scoped reimplementation of Trade Finder's equivalent
   (ww- prefix instead of tf-) rather than a shared file, matching the
   "don't couple page-specific CSS across pages" pattern already used
   site-wide. */

.ww-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 96%;
    margin: 0 auto 8px;
    padding-top: 10px;
    text-align: center;
}
.ww-header h1 {
    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 .ww-header h1 {
    background: linear-gradient(to right, #7c3aed, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

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

.ww-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;
}
.ww-methodology-note .icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; color: var(--primary); }

.ww-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;
}
.ww-settings-bar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ww-settings-bar-actions .sleeper-sync-box-inline { margin-left: 0; }
.ww-settings-bar-summary {
    font-size: 0.82rem;
    color: var(--text-muted);
    padding-top: 6px;
}
.ww-settings-bar-summary strong { color: var(--text); }
.ww-settings-change-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary);
    font-weight: 600;
    font-size: inherit;
    cursor: pointer;
    text-decoration: none;
}
.ww-settings-change-btn:hover { text-decoration: underline; }

.ww-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--text-muted);
}
.ww-empty-state .icon { width: 40px; height: 40px; color: var(--border-highlight); }
.ww-empty-state p { margin: 0; font-size: 0.9rem; max-width: 380px; }
.ww-empty-state-sub { font-size: 0.8rem !important; color: var(--text-muted); }

.ww-sample-banner {
    background: var(--val-amber-bg);
    border: 1px solid var(--val-amber-txt);
    color: var(--val-amber-txt);
    border-radius: var(--radius-md, 10px);
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.8rem;
    font-weight: 600;
}
.ww-sample-banner .ww-method-link { color: var(--val-amber-txt); }

.ww-method-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
    text-decoration: underline;
}

.ww-method-p { margin: 0 0 10px; font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; }
.ww-method-p code { font-size: 0.85em; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }

/* --- Your Team section ---------------------------------------------------- */

.ww-section { margin-bottom: 32px; }
.ww-section-header { margin-bottom: 12px; }
.ww-section-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}
.ww-section-header p { margin: 0; font-size: 0.8rem; color: var(--text-muted); }

.ww-my-team-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--val-amber-bg);
    border: 1px solid var(--val-amber-txt);
    border-radius: var(--radius-md, 10px);
    padding: 10px 14px;
    margin-bottom: 14px;
}
.ww-my-team-picker label {
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.82rem;
    color: var(--val-amber-txt);
    font-weight: 600;
}
.ww-my-team-picker select { max-width: 240px; }

/* Needs chips -- same --val-green/amber tokens used everywhere else on the
   site for good/needs-attention signaling. */
.ww-needs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ww-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;
}
.ww-need-chip-need { background: var(--val-amber-bg); color: var(--val-amber-txt); }
.ww-need-chip-solid { background: var(--val-green-bg); color: var(--val-green-txt); }
.ww-need-chip-neutral { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

.ww-player-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 14px);
    padding: 10px;
}

.ww-player-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
}
.ww-player-info { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.ww-player-name { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ww-empty-list-note {
    padding: 14px 12px;
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
}

/* --- Position filter + recommendation cards ------------------------------ */

.ww-pos-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ww-pos-filter-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: var(--radius-pill, 999px);
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ww-pos-filter-btn:hover { color: var(--text); }
.ww-pos-filter-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.ww-recommendations-list { display: flex; flex-direction: column; gap: 10px; }

/* No background here on purpose -- every card always gets exactly one
   .pos-tint-{QB,RB,WR,TE,K,DST} class alongside this one (see
   renderWwRecCard in waiverWire.js), which supplies the background color.
   Declaring one here too would just override the tint with equal CSS
   specificity, since this stylesheet loads after styles.css (where
   .pos-tint-* lives) -- learned the hard way when the tint silently
   disappeared entirely after first fixing this class's rounded corners. */
.ww-rec-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 14px);
    padding: 12px 16px;
}
.ww-rec-rank {
    flex-shrink: 0;
    width: 26px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
}
.ww-rec-main { flex: 1; min-width: 0; }
.ww-rec-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.ww-rec-name { font-weight: 700; color: var(--text); font-size: 0.95rem; }
.ww-rec-team { font-size: 0.75rem; color: var(--text-muted); }
.ww-rec-rationale { margin: 0; font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }
.ww-rec-side {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.ww-trending-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-pill, 999px);
    background: var(--val-amber-bg);
    color: var(--val-amber-txt);
    white-space: nowrap;
}
.ww-trending-badge .icon { width: 11px; height: 11px; }

.ww-table-footnote {
    margin: 14px 2px 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
}
.ww-table-footnote a { color: var(--primary); font-weight: 600; text-decoration: none; }
.ww-table-footnote a:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .ww-rec-card { flex-direction: column; align-items: stretch; }
    .ww-rec-side { align-items: flex-start; flex-direction: row; justify-content: space-between; }
}