@charset "UTF-8";

/* ===== Player Search layout ===== */
.ps-wrapper {
    margin: 0 auto;
    padding: 80px 20px 40px;
    max-width: 1500px;
}

/* Top controls row — stays pinned while the table scrolls underneath */
.ps-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    /* Stretch to wrapper edges so the white background covers content scrolling under it */
    margin: 0 -20px 16px;
    padding: 12px 20px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.ps-controls .ps-meta {
    margin-left: auto;
    color: #666;
    font-size: 13px;
}
.ps-game-date-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 3px 10px;
    background: #f3f4f6;
    border-radius: 999px;
    cursor: pointer;
    font-size: 12.5px;
    color: #2b3a4a;
    font-weight: 500;
}
.ps-game-date-label {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
    color: #6b7280;
}
.ps-game-date-input {
    border: 0;
    background: transparent;
    font-size: 12.5px;
    color: #1f2a36;
    padding: 0;
    cursor: pointer;
}
.ps-game-date-input:focus {
    outline: none;
}
/* All pill-toggle styling is now handled globally by .btn-group rules in
   front.css + the sliding-thumb behavior in /scripts/pill-toggle.js. */

/* Coming soon panel */
.ps-coming-soon {
    margin: 40px auto;
    padding: 40px 30px;
    max-width: 600px;
    text-align: center;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
}
.ps-coming-soon h2 {
    color: #444;
    font-size: 22px;
    margin-bottom: 8px;
}
.ps-coming-soon p {
    color: #777;
    margin: 0;
}

/* ===== Two-column layout ===== */
.ps-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) {
    .ps-layout { grid-template-columns: 1fr; }
}

/* ===== Filter rail ===== */
.ps-filters {
    position: sticky;
    top: 70px;       /* sit just below the sticky controls bar */
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    padding: 14px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}
.ps-filter-head h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    margin: 0 0 10px;
}
.ps-filter-add {
    margin-bottom: 12px;
}
.ps-filter-add select {
    font-size: 13px;
}
.ps-day-range {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #ddd;
}
.ps-day-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #2b3a4a;
    margin: 0 0 6px;
    font-weight: 500;
}
.ps-day-input {
    width: 56px;
    padding: 3px 6px;
    font-size: 13px;
    border: 1px solid #c8d2dd;
    border-radius: 4px;
    text-align: center;
}
.ps-day-input::-webkit-inner-spin-button { opacity: 1; }
.ps-day-slider {
    width: 100%;
    margin: 4px 0;
    accent-color: #4a90d9;
}
.ps-day-display {
    font-size: 11px;
    color: #6b7280;
    text-align: center;
}

.ps-filter-quick {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #ddd;
}
.ps-quick {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #444;
    cursor: pointer;
}
.ps-search input {
    font-size: 13px;
}
.ps-active-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ps-filter-card {
    background: #f7f9fb;
    border: 1px solid #d8e1ec;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
}
.ps-filter-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.ps-filter-card-name {
    font-weight: 600;
    color: #2b3a4a;
}
.ps-filter-remove {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
}
.ps-filter-remove:hover { color: #c33; }
.ps-filter-card-range {
    display: flex;
    justify-content: space-between;
    color: #555;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}
.ps-filter-threshold {
    margin: 4px 0 6px;
    padding: 4px 6px;
    background: #fff;
    border: 1px solid #d8e1ec;
    border-radius: 4px;
    font-size: 11px;
    color: #2b3a4a;
}
.ps-filter-threshold label {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ps-threshold-input {
    width: 56px;
    padding: 2px 4px;
    font-size: 12px;
    border: 1px solid #c8d2dd;
    border-radius: 3px;
    text-align: center;
}
.ps-threshold-input::-webkit-inner-spin-button {
    opacity: 1;
}
.ps-slider {
    margin: 8px 4px 4px;
}
.ps-filter-foot {
    margin-top: 14px;
    text-align: right;
}

/* jQuery UI slider tweaks */
.ps-slider.ui-slider {
    height: 6px;
    background: #dde6ef;
    border: none;
    border-radius: 3px;
}
.ps-slider .ui-slider-range {
    background: #4a90d9;
    border-radius: 3px;
}
.ps-slider .ui-slider-handle {
    width: 14px;
    height: 14px;
    top: -5px;
    background: #fff;
    border: 2px solid #4a90d9;
    border-radius: 50%;
    cursor: grab;
    margin-left: -7px;
    outline: none;
}
.ps-slider .ui-slider-handle:active { cursor: grabbing; }

/* ===== Results table =====
   The wrap is its OWN scroll container — both axes scroll inside it. That
   way the sticky thead works (pinned to wrap top) and the sticky player
   column works (pinned to wrap left), while the rest of the page (controls,
   filters) stays in place. */
.ps-results { min-width: 0; }
.ps-table-wrap {
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    overflow: auto;
    max-height: calc(100vh - 180px);
}
.ps-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ps-table th, .ps-table td {
    padding: 6px 8px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid #eee;
}
.ps-table th:first-child, .ps-table td:first-child,
.ps-table th[data-text="1"], .ps-table td[data-text="1"] {
    text-align: left;
}

/* Freeze the player column horizontally so the rest of the row scrolls under it.
   The right-edge marker is a ::after pseudo-element pinned to this cell, so it
   stays put even though border-collapse merges actual borders with the
   horizontally-scrolling neighbor cell. */
.ps-table th:first-child,
.ps-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
}
.ps-table th:first-child::after,
.ps-table td:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2px;
    background: #d1d5db;
    pointer-events: none;
}
.ps-table tbody tr:hover td:first-child {
    background: #f9fbfd;
}
.ps-table thead th {
    background: #f5f7f9;
    color: #2b3a4a;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    position: sticky;
    top: 0;          /* sticky inside .ps-table-wrap, which is the scroll container */
    z-index: 2;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 2px solid #d6dde5;
}
/* Top-left corner cell: pinned both axes — needs to sit above the row-sticky
   first column AND the column-sticky thead row. */
.ps-table thead th:first-child {
    z-index: 3;
    background: #f5f7f9;
}
.ps-table thead th:hover { background: #ecf1f5; }
.ps-table thead th .ps-sort-arrow {
    color: #999;
    margin-left: 2px;
    font-size: 10px;
}
.ps-table thead th.ps-sorted .ps-sort-arrow { color: #2b3a4a; }

.ps-table tbody tr:hover { background: #f9fbfd; }

/* Drill-down link to player-props-dfs (mirrors /positive-expected-value-props .edge-drill-btn) */
.ps-drill-btn {
    font-size: 10.5px;
    padding: 4px 10px 2px;
    border: 1px solid #007bff;
    border-radius: 20px;
    color: #007bff;
    text-decoration: none;
    background: #fff;
    margin-right: 8px;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.ps-drill-btn:hover {
    background: #007bff;
    color: #fff;
    text-decoration: none;
}
.ps-name { font-weight: 600; color: #1f2a36; }
.ps-team {
    color: #666;
    font-size: 11px;
    margin-left: 4px;
}

.ps-empty {
    padding: 40px;
    text-align: center;
    color: #888;
}