/* ONCC Homepage Latest Records — Visual Hierarchy v1.0
   Purpose:
   - Desktop: turn the flat table into a clear evidence panel with a strong header,
     zebra rows and settlement accents.
   - Mobile: each record becomes a true card with header / subject / detail / footer layers.
   Desktop HTML remains a semantic table.
*/

/* =========================
   SECTION / PANEL
   ========================= */
#latest-records{
  margin-top:18px;
  padding:14px 14px 16px;
  border:1px solid #d7e0e7;
  border-radius:12px;
  background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
  box-shadow:0 5px 18px rgba(7,20,31,.045);
}

#latest-records .onccf-home-section-ref__head{
  min-height:48px;
  margin-bottom:10px!important;
  padding:0 2px 9px;
  border-bottom:1px solid #dfe6eb;
}

#latest-records .onccf-home-section-ref__head h2{
  color:#082138!important;
  font-weight:950!important;
}

#latest-records .onccf-home-section-ref__head h2 span{
  background:#d91f26!important;
  color:#fff!important;
}

#latest-records .onccf-home-section-ref__head>a{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 9px;
  border:1px solid #d7e0e7;
  border-radius:999px;
  background:#fff;
  color:#0b3659!important;
  text-decoration:none!important;
}

/* =========================
   DESKTOP TABLE
   ========================= */
#latest-records .onccf-home-table-ref-wrap{
  overflow:hidden;
  border:1px solid #cfd9e1;
  border-radius:9px;
  background:#fff;
}

#latest-records .onccf-home-table-ref{
  border-collapse:separate;
  border-spacing:0;
}

#latest-records .onccf-home-table-ref thead th{
  padding:11px 12px;
  border-right:1px solid rgba(255,255,255,.13);
  border-bottom:0;
  background:linear-gradient(180deg,#0b304c,#08243a);
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
  white-space:nowrap;
}

#latest-records .onccf-home-table-ref thead th:last-child{
  border-right:0;
}

#latest-records .onccf-home-record-row td{
  position:relative;
  padding:11px 12px;
  border-right:1px solid #e1e7ec;
  border-bottom:1px solid #e1e7ec;
  background:#fff;
  color:#23394b;
  font-size:12px;
  line-height:1.45;
}

#latest-records .onccf-home-record-row:nth-child(even) td{
  background:#f7f9fb;
}

#latest-records .onccf-home-record-row:hover td{
  background:#fff9e9;
}

#latest-records .onccf-home-record-row:last-child td{
  border-bottom:0;
}

#latest-records .onccf-home-record-row td:last-child{
  border-right:0;
}

/* Stronger identity / result columns */
#latest-records .onccf-home-record-row td[data-col="fb"]{
  color:#0a3557;
  font-weight:900;
}

#latest-records .onccf-home-record-row td[data-col="match"]{
  color:#102a43;
  font-weight:800;
}

#latest-records .onccf-home-record-row td[data-col="market"]{
  color:#42586a;
  font-weight:750;
}

#latest-records .onccf-home-record-row td[data-col="selection"]{
  color:#173f5d;
  font-weight:850;
}

#latest-records .onccf-home-record-row td[data-col="odds"],
#latest-records .onccf-home-record-row td[data-col="result"]{
  font-variant-numeric:tabular-nums;
  font-weight:850;
}

#latest-records .onccf-home-record-row td[data-col="evidence"]{
  color:#6d7e8c;
  font-size:10.5px;
  letter-spacing:.01em;
}

/* Left-edge settlement status accent */
#latest-records .onccf-home-record-row td:first-child{
  border-left:4px solid transparent;
}

#latest-records .onccf-home-record-row--win td:first-child{
  border-left-color:#219653;
}
#latest-records .onccf-home-record-row--loss td:first-child{
  border-left-color:#d64545;
}
#latest-records .onccf-home-record-row--push td:first-child{
  border-left-color:#7d8b95;
}
#latest-records .onccf-home-record-row--half_win td:first-child{
  border-left-color:#2a9a68;
}
#latest-records .onccf-home-record-row--half_loss td:first-child{
  border-left-color:#d97858;
}

/* =========================
   MOBILE CARD LAYERS
   ========================= */
@media(max-width:760px){

  #latest-records{
    margin-top:12px;
    padding:10px 8px 12px;
    border-radius:10px;
    background:#f3f6f8;
  }

  #latest-records .onccf-home-table-ref-wrap{
    border:0!important;
    background:transparent!important;
  }

  #latest-records .onccf-home-table-ref tbody{
    gap:12px!important;
  }

  #latest-records .onccf-home-record-row{
    position:relative;
    overflow:hidden!important;
    border:1px solid #ced9e1!important;
    border-radius:11px!important;
    background:#fff!important;
    box-shadow:0 4px 12px rgba(7,20,31,.055)!important;
  }

  /* HEADER = Date / FB / Settlement */
  #latest-records .onccf-home-record-row td[data-col="date"],
  #latest-records .onccf-home-record-row td[data-col="fb"],
  #latest-records .onccf-home-record-row td[data-col="settlement"]{
    min-height:58px!important;
    padding:9px 10px!important;
    border-bottom:1px solid #d7e0e7!important;
    background:linear-gradient(180deg,#eef4f7 0%,#e8eff4 100%)!important;
  }

  /* First top cell carries the record state accent */
  #latest-records .onccf-home-record-row td[data-col="date"]{
    border-left:5px solid #7d8b95!important;
  }
  #latest-records .onccf-home-record-row--win td[data-col="date"]{
    border-left-color:#219653!important;
  }
  #latest-records .onccf-home-record-row--loss td[data-col="date"]{
    border-left-color:#d64545!important;
  }
  #latest-records .onccf-home-record-row--push td[data-col="date"]{
    border-left-color:#7d8b95!important;
  }
  #latest-records .onccf-home-record-row--half_win td[data-col="date"]{
    border-left-color:#2a9a68!important;
  }
  #latest-records .onccf-home-record-row--half_loss td[data-col="date"]{
    border-left-color:#d97858!important;
  }

  /* SUBJECT = Match */
  #latest-records .onccf-home-record-row td[data-col="match"]{
    min-height:66px!important;
    padding:10px 12px!important;
    border-bottom:1px solid #e0e6eb!important;
    background:#fffaf0!important;
    color:#08283f!important;
    font-size:14.5px!important;
    font-weight:900!important;
  }

  /* DETAIL = Market / Selection */
  #latest-records .onccf-home-record-row td[data-col="market"],
  #latest-records .onccf-home-record-row td[data-col="selection"]{
    min-height:62px!important;
    padding:10px 11px!important;
    background:#fff!important;
  }

  #latest-records .onccf-home-record-row td[data-col="market"]{
    color:#485d6e!important;
  }

  #latest-records .onccf-home-record-row td[data-col="selection"]{
    color:#0b3a5d!important;
    font-weight:900!important;
  }

  /* FOOTER = Odds / Result / Evidence */
  #latest-records .onccf-home-record-row td[data-col="odds"],
  #latest-records .onccf-home-record-row td[data-col="result"],
  #latest-records .onccf-home-record-row td[data-col="evidence"]{
    min-height:58px!important;
    padding:9px 10px!important;
    border-bottom:0!important;
    background:#f7f9fb!important;
  }

  #latest-records .onccf-home-record-row td[data-col="evidence"]{
    color:#687a88!important;
    font-size:11px!important;
  }

  /* Labels have more visual hierarchy */
  #latest-records .onccf-home-record-row td::before{
    color:#6f8190!important;
    font-size:9.5px!important;
    font-weight:950!important;
  }

  #latest-records .onccf-home-record-row td[data-col="match"]::before{
    color:#b48218!important;
  }

  #latest-records .onccf-home-record-row td[data-col="settlement"]::before{
    color:#4e6677!important;
  }

  #latest-records .onccf-home-settle-ref{
    box-shadow:0 2px 6px rgba(0,0,0,.08);
  }
}

/* Extra-narrow phones: preserve clear header/body/footer grouping. */
@media(max-width:430px){
  #latest-records .onccf-home-record-row{
    grid-template-areas:
      "date settle"
      "fb fb"
      "match match"
      "market selection"
      "odds result"
      "evidence evidence"!important;
  }

  #latest-records .onccf-home-record-row td[data-col="fb"]{
    min-height:47px!important;
    border-right:0!important;
    background:#f2f6f8!important;
  }

  #latest-records .onccf-home-record-row td[data-col="evidence"]{
    min-height:45px!important;
    border-top:1px solid #e2e8ec!important;
  }
}


/* =========================================================
   MOBILE STRONG CARD MODE v1.1
   Desktop table is intentionally unchanged.
   Phone goal: one record = one obvious module with clearly
   separated HEADER / MATCH / PICK / RESULT zones.
   ========================================================= */
@media(max-width:760px){

  #latest-records{
    padding:10px 7px 14px!important;
    background:#e9eef2!important;
  }

  #latest-records .onccf-home-table-ref tbody{
    gap:16px!important;
  }

  #latest-records .onccf-home-record-row{
    grid-template-columns:repeat(12,minmax(0,1fr))!important;
    grid-template-areas:
      "date date date fb fb fb settle settle settle settle settle settle"
      "match match match match match match match match match match match match"
      "market market market market market selection selection selection selection selection selection selection"
      "odds odds odds result result result evidence evidence evidence evidence evidence evidence"!important;
    border:2px solid #0b304c!important;
    border-radius:13px!important;
    background:#ffffff!important;
    box-shadow:0 7px 18px rgba(7,20,31,.12)!important;
  }

  /* ---------- HEADER : dark navy ---------- */
  #latest-records .onccf-home-record-row td[data-col="date"],
  #latest-records .onccf-home-record-row td[data-col="fb"],
  #latest-records .onccf-home-record-row td[data-col="settlement"]{
    min-height:62px!important;
    padding:10px 11px!important;
    border-bottom:0!important;
    border-right:1px solid rgba(255,255,255,.16)!important;
    background:#0b304c!important;
    color:#ffffff!important;
  }

  #latest-records .onccf-home-record-row td[data-col="settlement"]{
    border-right:0!important;
  }

  #latest-records .onccf-home-record-row td[data-col="date"]{
    border-left:0!important;
  }

  #latest-records .onccf-home-record-row td[data-col="date"]::before,
  #latest-records .onccf-home-record-row td[data-col="fb"]::before,
  #latest-records .onccf-home-record-row td[data-col="settlement"]::before{
    color:#b9cfde!important;
  }

  #latest-records .onccf-home-record-row td[data-col="fb"]{
    color:#ffffff!important;
    font-weight:950!important;
  }

  /* Settlement state gets a strong colored top edge on the whole card. */
  #latest-records .onccf-home-record-row--win{
    border-top:6px solid #219653!important;
  }
  #latest-records .onccf-home-record-row--loss{
    border-top:6px solid #df3038!important;
  }
  #latest-records .onccf-home-record-row--push{
    border-top:6px solid #7d8b95!important;
  }
  #latest-records .onccf-home-record-row--half_win{
    border-top:6px solid #14805a!important;
  }
  #latest-records .onccf-home-record-row--half_loss{
    border-top:6px solid #d97838!important;
  }

  #latest-records .onccf-home-settle-ref{
    padding:6px 10px!important;
    border-radius:6px!important;
    font-size:12px!important;
    font-weight:950!important;
    box-shadow:none!important;
  }

  /* ---------- MATCH : warm gold module ---------- */
  #latest-records .onccf-home-record-row td[data-col="match"]{
    min-height:78px!important;
    padding:12px 13px!important;
    border:0!important;
    border-top:1px solid #0b304c!important;
    border-bottom:1px solid #e0c982!important;
    background:#fff2c9!important;
    color:#08283f!important;
    font-size:15px!important;
    line-height:1.5!important;
    font-weight:950!important;
  }

  #latest-records .onccf-home-record-row td[data-col="match"]::before{
    color:#9b6d00!important;
  }

  /* ---------- PICK : clear blue module ---------- */
  #latest-records .onccf-home-record-row td[data-col="market"],
  #latest-records .onccf-home-record-row td[data-col="selection"]{
    min-height:72px!important;
    padding:11px 12px!important;
    border-top:0!important;
    border-bottom:1px solid #b8d4e6!important;
    background:#e7f3fa!important;
    color:#123b58!important;
  }

  #latest-records .onccf-home-record-row td[data-col="market"]{
    border-right:1px solid #b8d4e6!important;
  }

  #latest-records .onccf-home-record-row td[data-col="selection"]{
    border-right:0!important;
    font-weight:950!important;
  }

  #latest-records .onccf-home-record-row td[data-col="market"]::before,
  #latest-records .onccf-home-record-row td[data-col="selection"]::before{
    color:#376b8b!important;
  }

  /* ---------- RESULT / EVIDENCE : cool slate footer ---------- */
  #latest-records .onccf-home-record-row td[data-col="odds"],
  #latest-records .onccf-home-record-row td[data-col="result"],
  #latest-records .onccf-home-record-row td[data-col="evidence"]{
    min-height:64px!important;
    padding:10px 11px!important;
    border-bottom:0!important;
    border-top:0!important;
    border-right:1px solid #ced7de!important;
    background:#dfe6eb!important;
    color:#18364b!important;
    font-weight:850!important;
  }

  #latest-records .onccf-home-record-row td[data-col="evidence"]{
    border-right:0!important;
    color:#536a79!important;
    font-size:11px!important;
    font-weight:700!important;
  }

  #latest-records .onccf-home-record-row td[data-col="odds"]::before,
  #latest-records .onccf-home-record-row td[data-col="result"]::before,
  #latest-records .onccf-home-record-row td[data-col="evidence"]::before{
    color:#617785!important;
  }

  /* Stronger labels and values on mobile. */
  #latest-records .onccf-home-record-row td::before{
    margin-bottom:4px!important;
    font-size:9.5px!important;
    line-height:1.15!important;
    font-weight:950!important;
    letter-spacing:.045em!important;
  }

  #latest-records .onccf-home-record-row td{
    font-size:13.5px!important;
  }
}

/* Keep the same 4 visual zones even on very narrow phones. */
@media(max-width:430px){
  #latest-records .onccf-home-record-row{
    grid-template-columns:repeat(12,minmax(0,1fr))!important;
    grid-template-areas:
      "date date date date fb fb fb settle settle settle settle settle"
      "match match match match match match match match match match match match"
      "market market market market market selection selection selection selection selection selection selection"
      "odds odds odds result result result evidence evidence evidence evidence evidence evidence"!important;
  }

  #latest-records .onccf-home-record-row td[data-col="fb"]{
    min-height:62px!important;
    border-right:1px solid rgba(255,255,255,.16)!important;
    background:#0b304c!important;
  }

  #latest-records .onccf-home-record-row td[data-col="evidence"]{
    min-height:64px!important;
    border-top:0!important;
  }
}

/* =========================================================
   MOBILE INDEPENDENT RECORD MODULES v1.2
   v1.11.10: phone rendering no longer repurposes table rows.
   Desktop keeps the semantic table; mobile gets dedicated cards.
   ========================================================= */
.onccf-home-mobile-records{
  display:none;
}

@media(max-width:760px){
  #latest-records{
    padding:12px 10px 16px!important;
    background:#edf2f5!important;
  }

  #latest-records .onccf-home-desktop-records{
    display:none!important;
  }

  #latest-records .onccf-home-mobile-records{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:20px!important;
    width:100%!important;
  }

  #latest-records .onccf-home-mobile-records__empty{
    padding:16px!important;
    border:1px solid #d7e0e7!important;
    border-radius:12px!important;
    background:#fff!important;
    color:#536a79!important;
    font-size:13px!important;
    line-height:1.55!important;
  }

  #latest-records .onccf-home-mobile-record-card{
    position:relative!important;
    overflow:hidden!important;
    width:100%!important;
    margin:0!important;
    border:1px solid #b9c7d1!important;
    border-top:5px solid #7d8b95!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 8px 22px rgba(7,20,31,.13)!important;
  }

  #latest-records .onccf-home-mobile-record-card--win{
    border-top-color:#219653!important;
  }
  #latest-records .onccf-home-mobile-record-card--loss{
    border-top-color:#df3038!important;
  }
  #latest-records .onccf-home-mobile-record-card--push{
    border-top-color:#7d8b95!important;
  }
  #latest-records .onccf-home-mobile-record-card--half_win{
    border-top-color:#14805a!important;
  }
  #latest-records .onccf-home-mobile-record-card--half_loss{
    border-top-color:#d97838!important;
  }

  #latest-records .onccf-home-mobile-record-card__index{
    display:flex!important;
    align-items:center!important;
    min-height:30px!important;
    padding:5px 12px!important;
    border-bottom:1px solid #163f5d!important;
    background:#08243a!important;
    color:#cfe0eb!important;
    font-size:9.5px!important;
    line-height:1.2!important;
    font-weight:950!important;
    letter-spacing:.08em!important;
  }

  #latest-records .onccf-home-mobile-record-card__header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto!important;
    align-items:stretch!important;
    background:#0b304c!important;
    color:#fff!important;
  }

  #latest-records .onccf-home-mobile-record-card__headcell,
  #latest-records .onccf-home-mobile-record-card__status{
    min-width:0!important;
    padding:10px 11px!important;
    border-right:1px solid rgba(255,255,255,.15)!important;
  }

  #latest-records .onccf-home-mobile-record-card__status{
    min-width:92px!important;
    border-right:0!important;
  }

  #latest-records .onccf-home-mobile-record-card__header small,
  #latest-records .onccf-home-mobile-record-card__match small,
  #latest-records .onccf-home-mobile-record-card__pickgrid small,
  #latest-records .onccf-home-mobile-record-card__resultgrid small,
  #latest-records .onccf-home-mobile-record-card__evidence small{
    display:block!important;
    margin:0 0 4px!important;
    font-size:9px!important;
    line-height:1.2!important;
    font-weight:950!important;
    letter-spacing:.04em!important;
  }

  #latest-records .onccf-home-mobile-record-card__header small{
    color:#b9cfde!important;
  }

  #latest-records .onccf-home-mobile-record-card__header strong{
    display:block!important;
    color:#fff!important;
    font-size:13.5px!important;
    line-height:1.25!important;
    font-weight:950!important;
    overflow-wrap:anywhere!important;
  }

  #latest-records .onccf-home-mobile-record-card__status .onccf-home-settle-ref{
    min-width:0!important;
    width:max-content!important;
    max-width:100%!important;
    padding:6px 9px!important;
    border-radius:6px!important;
    color:#fff!important;
    font-size:11.5px!important;
    line-height:1.2!important;
    font-weight:950!important;
    white-space:nowrap!important;
  }

  #latest-records .onccf-home-mobile-record-card__match{
    padding:13px 13px 14px!important;
    border-bottom:1px solid #e0c982!important;
    background:#fff2c9!important;
  }

  #latest-records .onccf-home-mobile-record-card__match small{
    color:#9b6d00!important;
  }

  #latest-records .onccf-home-mobile-record-card__match strong{
    display:block!important;
    color:#08283f!important;
    font-size:15px!important;
    line-height:1.5!important;
    font-weight:950!important;
    overflow-wrap:anywhere!important;
  }

  #latest-records .onccf-home-mobile-record-card__pickgrid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    background:#e7f3fa!important;
  }

  #latest-records .onccf-home-mobile-record-card__pickgrid>div{
    min-width:0!important;
    min-height:72px!important;
    padding:11px 12px!important;
    border-right:1px solid #b8d4e6!important;
    border-bottom:1px solid #b8d4e6!important;
  }

  #latest-records .onccf-home-mobile-record-card__pickgrid>div:last-child{
    border-right:0!important;
  }

  #latest-records .onccf-home-mobile-record-card__pickgrid small{
    color:#376b8b!important;
  }

  #latest-records .onccf-home-mobile-record-card__pickgrid strong{
    display:block!important;
    color:#0b3a5d!important;
    font-size:13.5px!important;
    line-height:1.45!important;
    font-weight:950!important;
    overflow-wrap:anywhere!important;
  }

  #latest-records .onccf-home-mobile-record-card__resultgrid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    background:#f0f4f7!important;
  }

  #latest-records .onccf-home-mobile-record-card__resultgrid>div{
    min-width:0!important;
    min-height:62px!important;
    padding:10px 12px!important;
    border-right:1px solid #ced7de!important;
  }

  #latest-records .onccf-home-mobile-record-card__resultgrid>div:last-child{
    border-right:0!important;
  }

  #latest-records .onccf-home-mobile-record-card__resultgrid small,
  #latest-records .onccf-home-mobile-record-card__evidence small{
    color:#617785!important;
  }

  #latest-records .onccf-home-mobile-record-card__resultgrid strong{
    display:block!important;
    color:#102f45!important;
    font-size:14px!important;
    line-height:1.3!important;
    font-weight:950!important;
  }

  #latest-records .onccf-home-mobile-record-card__evidence{
    min-height:54px!important;
    padding:9px 12px 11px!important;
    border-top:1px solid #ced7de!important;
    background:#dfe6eb!important;
  }

  #latest-records .onccf-home-mobile-record-card__evidence strong{
    display:block!important;
    color:#536a79!important;
    font-size:11px!important;
    line-height:1.35!important;
    font-weight:800!important;
    overflow-wrap:anywhere!important;
  }
}

@media(max-width:390px){
  #latest-records .onccf-home-mobile-record-card__header{
    grid-template-columns:minmax(0,1fr) minmax(0,.9fr) auto!important;
  }

  #latest-records .onccf-home-mobile-record-card__headcell,
  #latest-records .onccf-home-mobile-record-card__status{
    padding:9px 8px!important;
  }

  #latest-records .onccf-home-mobile-record-card__status{
    min-width:84px!important;
  }

  #latest-records .onccf-home-mobile-record-card__header strong{
    font-size:12.5px!important;
  }
}

/* Settlement badges: keep all five final states visible on desktop and mobile. */
#latest-records .onccf-home-settle-ref.is-hit{background:#2b8e35!important;color:#fff!important}
#latest-records .onccf-home-settle-ref.is-miss{background:#e32227!important;color:#fff!important}
#latest-records .onccf-home-settle-ref.is-push{background:#858c92!important;color:#fff!important}
#latest-records .onccf-home-settle-ref.is-half-win{background:#14805a!important;color:#fff!important}
#latest-records .onccf-home-settle-ref.is-half-loss{background:#d97838!important;color:#fff!important}