@charset "UTF-8";

/* ===== Player Search layout ===== */
.ps-wrapper {
    padding: 80px 20px 40px;
}

/* Top controls row — stays pinned while the table scrolls underneath */
.ps-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    /* Bar look (bg / shadow / sticky / full-width / stacking) all comes from the
       shared .tmb-sport-bar. This used to re-declare z-index: 50 to stay above
       player-search's sticky table header — front.css's layer scale now puts the
       bar at 95 for every page, so that local override is gone: equal specificity
       to .tmb-sport-bar plus a later stylesheet meant it silently pinned THIS page
       to 50 while the rest of the site moved.
       .ps-wrapper is full-width with the same 20px side padding, so no extra
       left/right compensation is needed here — just a bit more bottom margin so
       the filters/table below don't crowd this bar. */
    margin-bottom: 24px;
    padding-left: 20px;
    padding-right: 20px;
}
.ps-controls .ps-meta {
    margin-left: auto;
    color: var(--tmb-gray-600);
    font-size: 13px;
}
.ps-game-date-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 3px 10px;
    background: var(--tmb-gray-100);
    border-radius: 999px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--tmb-navy-700);
    font-weight: 500;
}
.ps-game-date-label {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
    color: var(--tmb-gray-600);
}
.ps-game-date-input {
    border: 0;
    background: transparent;
    font-size: 12.5px;
    color: var(--tmb-gray-900);
    padding: 0;
    cursor: pointer;
}
.ps-game-date-input:focus {
    outline: none;
}

/* ===== Columns-to-show dropdown ===== */
.ps-cols-wrap {
    position: relative;
    display: inline-flex;
}
.ps-cols-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--tmb-gray-100);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tmb-navy-700);
}
.ps-cols-toggle:hover { background: var(--tmb-gray-300); }
.ps-cols-caret { font-size: 10px; color: var(--tmb-gray-600); }
.ps-cols-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    width: 220px;
    max-height: 60vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--tmb-blue-100);
    border-radius: 8px;
    box-shadow: 0 6px 20px var(--tmb-black-10);
    padding: 8px;
}
.ps-cols-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 4px 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--tmb-gray-100);
}
.ps-cols-menu-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tmb-gray-600);
    font-weight: 600;
}
.ps-cols-menu-actions { display: inline-flex; gap: 4px; }
.ps-cols-action {
    background: none;
    border: 1px solid var(--tmb-gray-400);
    border-radius: 4px;
    color: var(--tmb-chart-blue);
    cursor: pointer;
    font-size: 11px;
    padding: 1px 7px;
}
.ps-cols-action:hover { background: var(--tmb-blue-50); }
.ps-cols-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px 10px;
}
.ps-cols-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 3px 4px;
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--tmb-navy-700);
    cursor: pointer;
}
.ps-cols-item:hover { background: var(--tmb-gray-100); }
.ps-cols-item input { margin: 0; cursor: pointer; }
.ps-cols-item-locked {
    color: var(--tmb-gray-500);
    cursor: default;
}
.ps-cols-item-locked:hover { background: 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: var(--tmb-gray-100);
    border: 1px solid var(--tmb-gray-300);
    border-radius: 8px;
}
.ps-coming-soon h2 {
    color: var(--tmb-gray-700);
    font-size: 22px;
    margin-bottom: 8px;
}
.ps-coming-soon p {
    color: var(--tmb-gray-600);
    margin: 0;
}

/* ===== Two-column layout ===== */
.ps-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    align-items: start;
}
/* .ps-layout is inside .tmb-cq-root (see player-search-body.php's
   $ps_main_html), so this responds to THIS WIDGET'S width on /my-dash/,
   not just a narrow browser viewport. */
@container (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 var(--tmb-gray-300);
    border-radius: 8px;
    padding: 14px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}
.ps-filter-head {
    /* dashed underline matching the other section dividers below */
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--tmb-gray-300);
}
.ps-filter-head h3 {
    /* h3 itself is the flex row so the Save button stays inline with "Filters"
       regardless of how the wrapper div is styled by other rules. */
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tmb-gray-600);
    margin: 0;
    line-height: 1.3;
}
.ps-filter-head-text {
    flex: 1 1 auto;
    min-width: 0;
}
.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 var(--tmb-gray-300);
}
.ps-day-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--tmb-navy-700);
    margin: 0 0 6px;
    font-weight: 500;
}
.ps-day-input {
    width: 56px;
    padding: 3px 6px;
    font-size: 13px;
    border: 1px solid var(--tmb-gray-400);
    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: var(--tmb-chart-blue);
}
.ps-day-display {
    font-size: 11px;
    color: var(--tmb-gray-600);
    text-align: center;
}

.ps-filter-quick {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--tmb-gray-300);
}
.ps-quick {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--tmb-gray-700);
    cursor: pointer;
}
.ps-search input {
    font-size: 13px;
}
.ps-active-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ps-filter-card {
    background: var(--tmb-gray-100);
    border: 1px solid var(--tmb-blue-100);
    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: var(--tmb-navy-700);
}
.ps-filter-remove {
    background: none;
    border: none;
    color: var(--tmb-gray-600);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
}
.ps-filter-remove:hover { color: color-mix(in srgb, var(--tmb-red-700), white 11%); }
.ps-filter-card-range {
    display: flex;
    justify-content: space-between;
    color: var(--tmb-gray-700);
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}
.ps-filter-threshold {
    margin: 4px 0 6px;
    padding: 4px 6px;
    background: #fff;
    border: 1px solid var(--tmb-blue-100);
    border-radius: 4px;
    font-size: 11px;
    color: var(--tmb-navy-700);
}
.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 var(--tmb-gray-400);
    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: var(--tmb-blue-100);
    border: none;
    border-radius: 3px;
}
.ps-slider .ui-slider-range {
    background: var(--tmb-chart-blue);
    border-radius: 3px;
}
.ps-slider .ui-slider-handle {
    width: 14px;
    height: 14px;
    top: -5px;
    background: #fff;
    border: 2px solid var(--tmb-chart-blue);
    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 var(--tmb-gray-300);
    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 var(--tmb-gray-300);
}
.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: var(--tmb-gray-400);
    pointer-events: none;
}
.ps-table tbody tr:hover td:first-child {
    background: var(--tmb-gray-100);
}
.ps-table thead th {
    background: var(--tmb-gray-100);
    color: var(--tmb-navy-700);
    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 var(--tmb-gray-300);
}
/* 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: var(--tmb-gray-100);
}
.ps-table thead th:hover { background: var(--tmb-blue-50); }
.ps-table thead th .ps-sort-arrow {
    color: var(--tmb-gray-600);
    margin-left: 2px;
    font-size: 10px;
}
.ps-table thead th.ps-sorted .ps-sort-arrow { color: var(--tmb-navy-700); }

.ps-table tbody tr:hover { background: var(--tmb-gray-100); }

/* 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 var(--tmb-blue);
    border-radius: 20px;
    color: var(--tmb-blue);
    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: var(--tmb-blue);
    color: #fff;
    text-decoration: none;
}
.ps-name { font-weight: 600; color: var(--tmb-gray-900); }
.ps-team {
    color: var(--tmb-gray-600);
    font-size: 11px;
    margin-left: 4px;
}

.ps-empty {
    padding: 40px;
    text-align: center;
    color: var(--tmb-gray-600);
}

/* ============================================================ *
 * Saved filter sets (per-user) — Save button, dropdown, modal  *
 * ============================================================ */

/* Compact Save button that sits inside the Filters h3, flush right */
.ps-save-btn {
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid var(--tmb-gray-400);
    color: color-mix(in srgb, var(--tmb-blue-alt-hover), black 44%);
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
}
.ps-save-btn:hover { background: var(--tmb-blue-50); border-color: color-mix(in srgb, var(--tmb-blue-300), black 24%); color: color-mix(in srgb, var(--tmb-blue-alt-hover), black 44%); }
.ps-save-btn-icon { font-weight: 700; font-size: 13px; line-height: 1; }

/* Saved-filters dropdown, sitting directly under the head */
.ps-saved-wrap { position: relative; margin: 0 0 10px; }
.ps-saved-toggle {
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--tmb-gray-400);
    padding: 7px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.12s, border-color 0.12s;
}
.ps-saved-toggle:hover { background: var(--tmb-gray-100); border-color: var(--tmb-gray-600); }
.ps-saved-toggle[aria-expanded="true"] { background: var(--tmb-blue-50); border-color: color-mix(in srgb, var(--tmb-blue-300), black 24%); }
.ps-saved-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ps-saved-count {
    background: var(--tmb-gray-300);
    color: var(--tmb-gray-700);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    min-width: 22px;
    text-align: center;
}
.ps-saved-caret { color: var(--tmb-gray-600); font-size: 11px; }

.ps-saved-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--tmb-gray-400);
    border-radius: 4px;
    box-shadow: 0 6px 16px var(--tmb-black-10);
    max-height: 420px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
}
.ps-saved-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--tmb-gray-300);
    position: relative;
    transition: background 0.1s;
}
.ps-saved-item:last-child { border-bottom: none; }
.ps-saved-item:hover { background: var(--tmb-blue-50); }
.ps-saved-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--tmb-gray-900);
}
.ps-saved-item-type {
    color: var(--tmb-gray-600);
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border: 1px solid var(--tmb-gray-300);
    border-radius: 3px;
    background: var(--tmb-gray-100);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ps-saved-item-delete {
    background: transparent;
    border: none;
    color: var(--tmb-gray-500);
    cursor: pointer;
    padding: 0 4px;
    font-size: 18px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.1s, color 0.1s;
}
.ps-saved-item:hover .ps-saved-item-delete { opacity: 1; }
.ps-saved-item-delete:hover { color: color-mix(in srgb, var(--tmb-red-700), white 11%); }

.ps-saved-loggedout {
    margin: 0 0 10px;
    padding: 8px 10px;
    background: var(--tmb-gray-100);
    border: 1px dashed var(--tmb-gray-400);
    border-radius: 4px;
    color: var(--tmb-gray-600);
    font-size: 12px;
    text-align: center;
}
.ps-saved-loggedout a { color: color-mix(in srgb, var(--tmb-blue-alt-hover), black 44%); font-weight: 600; }

/* Hover popover with the full decoded filter list */
.ps-saved-popover {
    position: absolute;
    background: var(--tmb-gray-900);
    color: var(--tmb-gray-100);
    border-radius: 5px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.5;
    box-shadow: 0 6px 18px var(--tmb-black-30);
    min-width: 220px;
    max-width: 340px;
    z-index: 1100;
    pointer-events: none;
}
.ps-saved-popover-title {
    font-weight: 700;
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--tmb-gray-700);
    color: #fff;
    font-size: 13px;
}
.ps-saved-popover-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0;
}
.ps-saved-popover-key { color: var(--tmb-gray-500); flex: 0 0 auto; }
.ps-saved-popover-val {
    color: #fff;
    font-weight: 500;
    text-align: right;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ps-saved-popover-empty { color: var(--tmb-gray-500); font-style: italic; }

/* Save dialog modal */
.ps-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ps-modal-backdrop { position: absolute; inset: 0; background: var(--tmb-black-45); }
.ps-modal-box {
    position: relative;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 14px 40px var(--tmb-black-30);
    width: 440px;
    max-width: 92vw;
    z-index: 1;
}
.ps-modal-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--tmb-gray-300);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ps-modal-head h4 { margin: 0; font-size: 16px; font-weight: 600; }
.ps-modal-close {
    background: none; border: none;
    font-size: 22px; line-height: 1;
    cursor: pointer;
    color: var(--tmb-gray-600);
    padding: 2px 6px;
}
.ps-modal-close:hover { color: var(--tmb-gray-900); }
.ps-modal-body { padding: 16px 18px; }
.ps-modal-label {
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tmb-gray-900);
}
.ps-modal-label input {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 7px 9px;
    border: 1px solid var(--tmb-gray-400);
    border-radius: 4px;
    font-size: 14px;
    font-weight: normal;
    box-sizing: border-box;
}
.ps-modal-label input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--tmb-blue-300), black 24%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tmb-gray-600) 18%, transparent);
}
.ps-modal-summary-label {
    font-size: 12px;
    color: var(--tmb-gray-600);
    margin-bottom: 5px;
    font-weight: 600;
}
.ps-modal-summary {
    background: var(--tmb-gray-100);
    border: 1px solid var(--tmb-gray-300);
    border-radius: 5px;
    padding: 9px 11px;
    font-size: 12px;
    color: var(--tmb-gray-700);
    line-height: 1.6;
    max-height: 200px;
    overflow-y: auto;
}
.ps-modal-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 1px 0;
}
.ps-modal-summary-key { color: var(--tmb-gray-600); }
.ps-modal-summary-val { color: var(--tmb-gray-900); font-weight: 500; }
.ps-modal-summary em { color: var(--tmb-gray-600); }
.ps-modal-overwrite {
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--tmb-warning-bg-light);
    border: 1px solid color-mix(in srgb, var(--tmb-yellow), white 47%);
    border-radius: 4px;
    color: var(--tmb-warning-text);
    font-size: 12px;
}
.ps-modal-error {
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--tmb-bad-1);
    border: 1px solid var(--tmb-bad-4);
    border-radius: 4px;
    color: color-mix(in srgb, var(--tmb-red-700), black 27%);
    font-size: 12px;
}
.ps-modal-foot {
    padding: 12px 18px;
    border-top: 1px solid var(--tmb-gray-300);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Admin view-as banner — only rendered when an admin opens with ?view_as=N */
.ps-viewas-banner {
    background: var(--tmb-red); color: #fff; text-align: center;
    padding: 7px 14px; font-size: 13px; font-weight: 600;
    position: sticky; top: 0; z-index: 99999;
}
.ps-viewas-banner a { color: #fff; margin-left: 10px; text-decoration: underline; }
.ps-viewas-banner small { font-weight: 400; opacity: 0.85; margin-left: 8px; }