/* static/css/rbprojections.css */

/* ===== Theme ===== */
:root{
  --bg:#0b0f16;
  --panel:#101626;
  --card:#0f1726;
  --muted:#9aa3b2;
  --text:#e6edf7;
  --acc:#63e6be;    /* teal */
  --acc2:#8ab4ff;   /* blue */
  --border:rgba(138,180,255,.18);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font:14px/1.45 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, #13203c 0%, transparent 60%), var(--bg);
  color:var(--text);
}

/* ===== Header / Controls ===== */
.rb-header{ padding:24px 24px 8px; }
.rb-header h1{ margin:0 0 4px; font-size:28px; letter-spacing:.5px; }
.rb-subtitle{ color:var(--muted); }

.rb-controls{
  display:flex; flex-wrap:wrap; gap:12px 16px;
  padding:12px 24px 6px; align-items:flex-end;
  background:linear-gradient(180deg, rgba(138,180,255,.06), transparent);
  border-bottom:1px solid var(--border);
}
.rb-control{ display:flex; flex-direction:column; gap:6px; }
.rb-control label{ color:var(--muted); font-size:12px; }
.rb-control input, .rb-control select{
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  padding:8px 10px; border-radius:10px; outline:none;
}
.rb-toggle input{ margin-right:6px; }

/* ===== Cards Grid (grid, not flex) ===== */
#cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(340px, 1fr));
  gap:16px;
  padding:16px 24px 48px;
}

/* Group header spans full row */
.rb-group-header{
  grid-column: 1 / -1;
  padding:6px 4px 2px;
  margin-top:6px;
}
.rb-group-title{ font-size:16px; font-weight:700; }
.rb-group-meta{ font-size:12px; opacity:.85; }

/* ===== Card ===== */
.rb-card{
  background:linear-gradient(180deg, rgba(99,230,190,.06), rgba(138,180,255,.04));
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  position:relative;
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset, 0 10px 24px rgba(0,0,0,.35);
}
.rb-card:before{
  content:"";
  position:absolute; inset:-1px; border-radius:16px; pointer-events:none;
  background: radial-gradient(400px 80px at 20% -20%, rgba(138,180,255,.20), transparent 60%);
  mix-blend-mode:screen;
}

.rb-card-top{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.rb-player{ font-weight:700; font-size:16px; }
.rb-meta{ color:var(--muted); font-size:12px; }

.rb-media{ display:flex; align-items:center; gap:8px; }
.rb-photo{
  width:88px; height:88px; object-fit:cover; border-radius:12px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
}
.rb-logo{
  width:36px; height:36px; object-fit:contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.rb-player-link{ text-decoration:none; color:inherit; }

/* badges */
.rb-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.rb-badge{
  font-size:11px; color:#0a1222; background:var(--acc2);
  border-radius:999px; padding:4px 8px; letter-spacing:.2px;
  box-shadow:0 0 12px rgba(138,180,255,.35) inset;
}
.rb-badge.alt{ background:var(--acc); box-shadow:0 0 12px rgba(99,230,190,.35) inset; }

/* rows */
.rb-rows{ display:flex; flex-direction:column; gap:6px; }
.rb-row{
  display:flex; justify-content:space-between; gap:8px;
  padding:8px 10px; border-radius:10px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
}
.rb-value{ font-weight:600; }

/* ===== Odds block ===== */
.rb-row.rb-odds{ border-style:dashed; opacity:.98; }
.rb-row.rb-odds > .rb-odds-left{ display:none; } /* no left label column */
.rb-row.rb-odds .rb-value{ width:100%; }
.rb-odds-title{
  font-size:13px; font-weight:600; margin-bottom:6px; opacity:.9;
}

/* desktop/tablet odds table */
.rb-odds-table{
  width:100%; table-layout:fixed; border-collapse:collapse;
  font-size:14px; line-height:1.25;
}
.rb-odds-table th, .rb-odds-table td{
  padding:6px 8px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.rb-odds-table th{
  font-weight:600; background:rgba(255,255,255,0.05);
}
.rb-odds-table tr:nth-child(odd) td{ background:rgba(255,255,255,0.03); }
.rb-odds-table tr:last-child td{ border-bottom:0; }

/* desktop column widths */
.rb-odds-table th:nth-child(1),
.rb-odds-table td:nth-child(1){ width:24%; text-align:left; }   /* Market */
.rb-odds-table th:nth-child(2),
.rb-odds-table td:nth-child(2){ width:18%; text-align:center; } /* Line   */
.rb-odds-table th:nth-child(3),
.rb-odds-table td:nth-child(3){ width:29%; text-align:right; }  /* DK O/U */
.rb-odds-table th:nth-child(4),
.rb-odds-table td:nth-child(4){ width:29%; text-align:right; }  /* FD O/U */

/* ===== Responsive ===== */

/* 2-up on medium screens */
@media (max-width: 1200px){
  #cards{ grid-template-columns: repeat(2, minmax(320px, 1fr)); }
}

/* 1-up on tablets/phones */
@media (max-width: 768px){
  #cards{ grid-template-columns: 1fr; }
  .rb-photo{ width:72px; height:72px; }
}

/* Mobile odds: stack each row (Market + Line on top, DK and FD below) */
@media (max-width: 560px){
  .rb-odds-title{ font-size:12px; margin-bottom:4px; }
  .rb-odds-table{ font-size:12px; line-height:1.2; }

  /* hide header row (first tr) */
  .rb-odds-table tr:first-child{ display:none; }

  /* each data row becomes a small grid */
  .rb-odds-table tr{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-row-gap:4px;
    padding:6px 0;
    background:none !important;
  }
  .rb-odds-table td{
    border:0; padding:2px 0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  /* Market (bold) + Line (right) */
  .rb-odds-table td:nth-child(1){
    grid-column:1; font-weight:700;
  }
  .rb-odds-table td:nth-child(2){
    grid-column:2; justify-self:end; opacity:.9;
  }

  /* DK and FD each get full width on their own lines with labels */
  .rb-odds-table td:nth-child(3),
  .rb-odds-table td:nth-child(4){
    grid-column:1 / -1; justify-self:start;
  }
  .rb-odds-table td:nth-child(3)::before{
    content:"DK "; opacity:.7; margin-right:8px;
  }
  .rb-odds-table td:nth-child(4)::before{
    content:"FD "; opacity:.7; margin-right:8px;
  }

  /* make rows container breathe a bit more on mobile */
  .rb-row{ padding:8px; }
}

/* Desktop shows table; mobile shows sectioned markets */
.rb-odds-desktop{ display:block; }
.rb-odds-mobile{ display:none; }

/* Mobile market sections */
@media (max-width: 560px){
  .rb-odds-desktop{ display:none; }
  .rb-odds-mobile{ display:block; }

  .rb-odds-title{ font-size:12px; margin-bottom:6px; }

  .rb-odds-mkt{
    margin-bottom:10px;
    padding:8px;
    border:1px solid var(--border);
    border-radius:8px;
    background:rgba(255,255,255,.02);
  }
  .rb-odds-mkt:last-child{ margin-bottom:0; }

  .rb-odds-mkt-title{
    font-weight:600;
    font-size:13px;
    margin-bottom:6px;
  }

  .rb-odds-mkt-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr); /* Line | DK | FD */
    gap:6px 10px;
    align-items:center;
  }
  .rb-odds-mkt-grid .hd{
    font-size:11px;
    color:var(--muted);
  }

  /* Anytime TD: only DK | FD (2 cols) */
  .rb-odds-mkt[data-anytime="1"] .rb-odds-mkt-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}