/* ==========================================================================
   replay_nd.css  --  new-design (nd) re-skin for the replay/hand-list FILTERS
   and TABLE used by replays.php + playerhand.php (and the tables injected by
   ajax_replay.php / ajax_playerhand.php, which share these class names).

   WHY A SEPARATE FILE, NOT newdesign.css:
   Those page bodies live OUTSIDE the .nd wrapper (the header partial closes
   .nd right after the chrome), so the .nd-scoped design tokens do not reach
   them. This file therefore carries the nd palette as literal values and
   overrides only the legacy filter/table look. It changes styling ONLY -- no
   markup, ids, names, or JS hooks are touched. Load it AFTER the page's own
   <style> so it wins; !important covers the legacy inline styles.

   nd palette (mirrors css/newdesign.css :root of .nd):
     navy-deep #002750  navy #3d5d7d  cyan #22a2c4  cyan-b #0078a5
     orange #f78d1d  orange-deep #FB7600  line #d9d9d9  font PT Sans/Roboto
   ========================================================================== */

/* ---- filter panel ---- */
/* A tinted panel so the card reads against the page's white background, with
   white inputs sitting on the tint. */
.rake-filters,
.rake-overview-filters {
    background: #eef3f8 !important;
    border: 1px solid #cbd8e6 !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 34px -12px rgba(0, 39, 80, .28) !important;
    overflow: hidden !important;
    color: #3d5d7d !important;
    font-family: "PT Sans", "Roboto", sans-serif !important;
    margin-bottom: 28px !important;   /* breathing room before the table */
}
.rake-filters .radio-input,
.rake-overview-filters .radio-input {
    background: transparent !important;
    border-left: 1px solid #dbe5ef !important;
    border-top: 1px solid #dbe5ef !important;
}
/* the "Filter" title bar: it is the FIRST .radio-input, but hidden <input>
   fields precede it, so :first-child misses it -- :first-of-type (first div
   child) hits it. A solid nd cyan->blue header band with white text. */
.rake-filters > .radio-input:first-of-type {
    background: linear-gradient(135deg, #22a2c4, #4B86C2) !important;
    color: #fff !important;
    border: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 15px !important;
    text-shadow: 0 1px 2px rgba(0, 39, 80, .35) !important;
}
.radio-header,
.dropdown-header {
    background: transparent !important;
    color: #002750 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

/* ---- toggle / stake pills ---- */
.radio-input label { background: #fff !important; }
.radio-input input + label {
    background: #fff !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 8px !important;
    color: #3d5d7d !important;
    text-shadow: none !important;
    font-weight: 600 !important;
    transition: color .15s, background .15s, border-color .15s !important;
}
.radio-input label:hover {
    background: #f4f8fb !important;
    color: #22a2c4 !important;
    border-color: #22a2c4 !important;
}
.radio-input input:checked + label {
    background: #22a2c4 !important;
    border: 1px solid #22a2c4 !important;
    color: #fff !important;
    text-shadow: none !important;
}
/* None / Any buttons */
.radio-input input[type="button"] {
    background: #fff !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 8px !important;
    color: #3d5d7d !important;
    font-weight: 700 !important;
    transition: color .15s, background .15s, border-color .15s !important;
}
.radio-input input[type="button"]:hover {
    background: #f4f8fb !important;
    color: #22a2c4 !important;
    border-color: #22a2c4 !important;
}

/* ---- dropdowns ---- */
.dropdown-select select {
    background: #fff !important;
    color: #002750 !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 8px !important;
    text-shadow: none !important;
    font-weight: 600 !important;
}
.dropdown-select select:hover { color: #22a2c4 !important; }
.dropdown-select select:hover option { color: #002750 !important; }
.dropdown-arrow { border-color: #3d5d7d rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) !important; }

/* ---- number (pot BB) inputs ---- */
.number-input input { border: 1px solid #d9d9d9 !important; }
.number-input button {
    background: #22a2c4 !important;
    color: #fff !important;
    text-shadow: none !important;
}
.number-input button:hover { background: #0078a5 !important; color: #fff !important; }

/* ---- date range pickers (legacy inline-styled boxes) ---- */
#daterangestart,
#daterangeend {
    border: 1px solid #d9d9d9 !important;
    border-radius: 8px !important;
    color: #3d5d7d !important;
}

/* ---- apply button -> nd orange pill ---- */
.radio-input input[type="submit"],
.srch {
    background: #f78d1d !important;
    border: 1px solid #f78d1d !important;
    border-radius: 100px !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    padding: 11px 22px !important;
    box-shadow: 0 10px 20px -10px rgba(247, 141, 29, .6) !important;
    transition: background .15s !important;
}
.radio-input input[type="submit"]:hover,
.srch:hover {
    background: #FB7600 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* ---- the hand-list table ---- */
.handlist {
    background: #fff !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 40px -30px rgba(0, 39, 80, .4) !important;
    color: #3d5d7d !important;
    font-family: "PT Sans", "Roboto", sans-serif !important;
}
.handlist th {
    background: #002750 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    font-size: 12.5px !important;
    text-shadow: none !important;
    padding: 12px .5em !important;
    border: 0 !important;
}
.handlist th a { color: #fff !important; text-decoration: none !important; }
.handlist th a:hover { color: #22a2c4 !important; }
.handlist td { color: #41525e !important; border: 0 !important; }
.handlist tr:nth-child(2n) { background: #f4f8fb !important; }
.handlist tbody tr:hover { background: #eef6fb !important; }

/* play button */
.handlist button {
    background: #22a2c4 !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #fff !important;
    padding: 5px 10px !important;
}
.handlist button:hover { background: #0078a5 !important; color: #fff !important; }

/* winner + emphasised cells */
.winner a { color: #22a2c4 !important; font-weight: 700 !important; }
.winner a:hover { color: #0078a5 !important; }
.boldy { color: #0078a5 !important; }
.pot { color: #22a2c4 !important; }

/* sort icons: cyan on hover to match the nd accent */
.handlist a:hover .sorticon {
    filter: invert(52%) sepia(66%) saturate(468%) hue-rotate(147deg) brightness(90%) contrast(88%) !important;
}

/* ---- pagination -> nd pills ---- */
.pagination a {
    background: #22a2c4 !important;
    border: 1px solid #22a2c4 !important;
    border-radius: 8px !important;
    color: #fff !important;
    text-shadow: none !important;
    padding: 7px 13px !important;
    margin: 5px !important;
    font-weight: 700 !important;
    transition: background .15s !important;
}
.pagination a:hover { background: #0078a5 !important; color: #fff !important; }
.pagination .currentpage {
    background: #3d5d7d !important;
    border-color: #3d5d7d !important;
    color: #fff !important;
}

/* ---- Won/Lost outcome strip on the player's hole-cards cell (playerhand.php)
        replaces the old solid #4B86C2 winning-hand cell background ---- */
.handlist td.holecell { position: relative !important; }   /* no padding: don't shift the cards */
.hand-outcome {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;                 /* sits ABOVE the cards, no layout shift */
    text-align: center;
    padding: 3px 0 2px !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .28);
}
.hand-outcome.won  { background: linear-gradient(135deg, #1fae74, #128a5b); }
.hand-outcome.lost { background: linear-gradient(135deg, #c9505a, #a12f3a); }