/* =====================================================================
   Waiver Radar — /waiver-radar/
   Post-draft free agent / waiver scanner with per-position columns.

   Depends on projections.css (page hero + highlight gradient) and
   rankings.css (modal-v2 styles). Both enqueued for this template.
   ===================================================================== */

/* ── Break out of Astra's container ─────────────────────── */
.page-template-page-waiver-radar .ast-container,
.page-template-page-waiver-radar #content,
.page-template-page-waiver-radar #primary,
.page-template-page-waiver-radar .site-content,
.page-template-page-waiver-radar .ast-article-single,
.page-template-page-waiver-radar .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ── Page wrapper ─────────────────────────────────────── */
.rw-wradar-page {
    width: 100%;
    overflow-x: hidden;
    background: var(--rw-dark, #0A0F1E);
    color: var(--rw-text, #F9FAFB);
    min-height: 100vh;
    padding-bottom: 80px;
}

/* The [hidden] HTML attribute applies `display: none` at the lowest possible
   CSS specificity — any sibling rule that sets `display: flex` / `grid` /
   `block` here would silently override it (the loading spinner is the most
   notable victim). Force the elements we toggle via `hidden` to actually
   hide. Do NOT cast this net broadly across all descendants — the shared
   player modal uses jQuery's .show()/.hide() on tab panels that still carry
   the `hidden` HTML attribute, and a blanket `!important` would prevent
   .show() from ever revealing them. */
.rw-wradar-loading[hidden],
.rw-wradar-state[hidden],
.rw-wradar-board[hidden] {
    display: none !important;
}

.rw-wradar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── League selector bar ──────────────────────────────── */
/* The picker itself uses the shared .rw-league-picker classes (style.css);
   this section just provides the row spacing on the Waiver Radar page.
   text-align: center centers the inline-flex picker within the inner row. */
.rw-wradar-selector-section {
    padding: 24px 0 0;
    text-align: center;
}

/* ── Empty / state sections ───────────────────────────── */
.rw-wradar-state {
    padding: 64px 24px;
    text-align: center;
}

.rw-wradar-state-inner {
    max-width: 480px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 48px 32px;
}

.rw-wradar-state-icon {
    font-size: 2.6rem;
    margin-bottom: 14px;
    line-height: 1;
}

.rw-wradar-state h2 {
    margin: 0 0 12px;
    font-size: 1.4rem;
    color: #F8FAFC;
}

.rw-wradar-state p {
    color: #9AA3B2;
    margin: 0 0 24px;
    line-height: 1.55;
}

/* ── Active board ─────────────────────────────────────── */
.rw-wradar-board {
    padding: 24px 0 0;
}

/* ── Controls strip ───────────────────────────────────── */
.rw-wradar-controls {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.rw-wradar-controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 28px;
}

/* Player count toggle sits inside the legend row, pushed to the right
   so the legend chips read naturally on the left. */
.rw-wradar-legend-toggle {
    margin-left: auto;
}

.rw-wradar-control-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rw-wradar-control-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #9AA3B2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Segmented toggle (used for sort + visibility) */
.rw-wradar-segment {
    display: inline-flex;
    background: rgba(15, 23, 35, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}

.rw-wradar-seg-btn {
    background: transparent;
    border: 0;
    color: #B5BCC9;
    padding: 7px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.rw-wradar-seg-btn:hover {
    color: #F8FAFC;
}

.rw-wradar-seg-btn.active {
    background: linear-gradient(135deg, #0ABFBC, #8B5CF6);
    color: #FFFFFF;
}

.rw-wradar-seg-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.rw-wradar-seg-btn:disabled:hover {
    color: #B5BCC9;
}

/* Opponent dropdown */
.rw-wradar-opp-group {
    margin-left: auto;
}

.rw-wradar-opp-select {
    background: rgba(15, 23, 35, 0.8);
    color: #E4E7EE;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 30px 8px 12px;
    font-size: 0.9rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #9AA3B2 50%),
                      linear-gradient(135deg, #9AA3B2 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.rw-wradar-opp-select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.rw-wradar-opp-select:focus {
    outline: none;
    border-color: #8B5CF6;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25);
}

/* Legend */
.rw-wradar-legend {
    margin: 12px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #9AA3B2;
    font-size: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
}

.rw-wradar-legend-chip {
    display: inline-block;
    width: 18px;
    height: 12px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: middle;
}

.rw-wradar-legend-mine  { background: rgba(10, 191, 188, 0.4); border: 1px solid #0ABFBC; }
.rw-wradar-legend-opp   { background: rgba(139, 92, 246, 0.4); border: 1px solid #8B5CF6; }
/* Other rosters chip — matches the dimmed row appearance. */
.rw-wradar-legend-avail { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); opacity: 0.55; }
.rw-wradar-legend-sep   { color: rgba(255,255,255,0.2); margin: 0 4px; }
.rw-wradar-legend-icon  { display: inline-block; opacity: 0.8; }

/* ── Loading ──────────────────────────────────────────── */
.rw-wradar-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px;
    color: #9AA3B2;
}

.rw-wradar-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: #0ABFBC;
    border-radius: 50%;
    animation: rw-wradar-spin 0.8s linear infinite;
}

@keyframes rw-wradar-spin {
    to { transform: rotate(360deg); }
}

/* ── Position grid ────────────────────────────────────── */
.rw-wradar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

/* When only 2-3 columns visible, let them grow wider */
.rw-wradar-grid[data-col-count="2"] { grid-template-columns: repeat(2, 1fr); }
.rw-wradar-grid[data-col-count="3"] { grid-template-columns: repeat(3, 1fr); }
.rw-wradar-grid[data-col-count="4"] { grid-template-columns: repeat(4, 1fr); }

.rw-wradar-col {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.rw-wradar-col-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #FFFFFF;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.rw-wradar-col-hd-qb  { box-shadow: inset 0 -2px 0 #FF6B6B; }
.rw-wradar-col-hd-rb  { box-shadow: inset 0 -2px 0 #2EE8A0; }
.rw-wradar-col-hd-wr  { box-shadow: inset 0 -2px 0 #C084FC; }
.rw-wradar-col-hd-te  { box-shadow: inset 0 -2px 0 #FBBF24; }
.rw-wradar-col-hd-k   { box-shadow: inset 0 -2px 0 #CBD5E1; }
.rw-wradar-col-hd-def { box-shadow: inset 0 -2px 0 #22D3EE; }

.rw-wradar-col-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: #9AA3B2;
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 7px;
    border-radius: 10px;
    letter-spacing: 0;
    text-transform: none;
}

.rw-wradar-col-rows {
    flex: 1;
}

.rw-wradar-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background: transparent;
    transition: background 0.12s;
    position: relative;
}

.rw-wradar-row:last-child { border-bottom: 0; }

.rw-wradar-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.rw-wradar-rank {
    font-size: 0.75rem;
    color: #6B7384;
    font-weight: 600;
    text-align: right;
}

.rw-wradar-name-wrap {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rw-wradar-name {
    font-size: 0.9rem;
    color: #E4E7EE;
    font-weight: 500;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.rw-wradar-name:hover {
    color: #0ABFBC;
    text-decoration: underline;
}

.rw-wradar-team {
    font-size: 0.72rem;
    color: #9AA3B2;
    font-weight: 600;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    padding: 2px 5px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
}

/* Highlight states */
.rw-wradar-row-mine {
    background: rgba(10, 191, 188, 0.12);
    border-left: 3px solid #0ABFBC;
    padding-left: 7px;
}

.rw-wradar-row-mine:hover {
    background: rgba(10, 191, 188, 0.2);
}

.rw-wradar-row-opp {
    background: rgba(139, 92, 246, 0.12);
    border-left: 3px solid #8B5CF6;
    padding-left: 7px;
}

.rw-wradar-row-opp:hover {
    background: rgba(139, 92, 246, 0.2);
}

/* Other rostered players (when we know it) — dimmed so available players
   are the visual focus. Available players intentionally have NO class —
   they render with the default bright row appearance. Unknown status
   (manual upload, sync without opponent data) also falls through to the
   default bright look so we never visually flag what we don't know. */
.rw-wradar-row-taken {
    opacity: 0.55;
}

/* Status icons */
.rw-wradar-icons {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    flex-shrink: 0;
}

.rw-wradar-icon {
    font-size: 0.85rem;
    line-height: 1;
    cursor: help;
}

.rw-wradar-icon-injury  { color: #FBBF24; }
.rw-wradar-icon-injury.is-out    { color: #EF4444; }
.rw-wradar-icon-injury.is-doubt  { color: #FB923C; }

.rw-wradar-icon-news    { color: #60A5FA; font-size: 0.78rem; }

/* Expand row */
.rw-wradar-expand-btn {
    display: block;
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #9AA3B2;
    padding: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.rw-wradar-expand-btn:hover {
    background: rgba(10, 191, 188, 0.1);
    color: #0ABFBC;
}

.rw-wradar-col-empty {
    padding: 20px 12px;
    text-align: center;
    color: #6B7384;
    font-size: 0.8rem;
    font-style: italic;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
    .rw-wradar-inner { padding: 0 16px; }
    .rw-wradar-controls-row { gap: 14px; }
    .rw-wradar-opp-group { margin-left: 0; width: 100%; }
    .rw-wradar-opp-group .rw-wradar-control-label { white-space: nowrap; }
    .rw-wradar-opp-select { flex: 1; }
}

@media (max-width: 640px) {
    .rw-wradar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .rw-wradar-seg-btn { padding: 6px 10px; font-size: 0.8rem; }
}