/* Defensive Rankings — CARD LAYOUT (updated) */

#defense-rankings-container { display: none; }

/* Theme tokens */
#defense-rankings-container.def-card-scope{
  --bg:#0b1220; --panel:#0f172a; --card:#111827; --chip:#1f2937;
  --text:#e5e7eb; --muted:#9aa4b2; --accent:#7c5cff; --accent2:#22d3ee;
  --good:#34d399; --bad:#fb7185; --shadow:0 10px 25px rgba(0,0,0,.35);
  --radius:14px; color:var(--text);
}

#defense-rankings-container .def-back{
    width: 200px;
    display: block;
    margin: 0 auto; /* This centers the element horizontally */
    margin-bottom: 10px;
    text-align: center; /* Centers any inline content inside the button */
    padding: 8px 16px;
    font-size: 24px;
    border:1px solid rgba(34,221,182,.45); 
    color:#071317;
    background-image:linear-gradient(180deg, rgba(124,227,216,.98), rgba(34,221,182,.98));
    opacity: .75;
    font-weight: 500;
    border-radius: 12px; 
}

#defense-rankings-button {
    margin-bottom: 10px;
    text-align: center; /* Centers any inline content inside the button */
    padding: 10px 20px;
    font-size: 24px;
    border:1px solid rgba(34,221,182,.45); 
    color:#071317;
    background-image:linear-gradient(180deg, rgba(124,227,216,.98), rgba(34,221,182,.98));
    opacity: .75;
    font-weight: 500;
    border-radius: 12px; 
}

/* Header */
#defense-rankings-container .defense-header{
  display:flex; align-items:center; gap:12px;
  position: sticky; top:0; z-index:20; padding:10px 8px 8px;
  /* background: linear-gradient(180deg, rgba(11,18,32,.95) 70%, rgba(11,18,32,0)); */
  backdrop-filter: blur(6px);
}
#defense-rankings-container .defense-logo{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%); color:#fff; font-weight:700; box-shadow:var(--shadow);
}
#defense-rankings-container .defense-title{ font-size:18px; font-weight:700 }
#defense-rankings-container .defense-subtitle{ font-size:12px; color:var(--muted) }
#defense-rankings-container .defense-titles{ display:flex; flex-direction:column }

/* Controls */
#defense-rankings-container .defense-controls-panel{
  margin:12px 0 16px; background:var(--panel); border-radius:var(--radius); padding:8px; box-shadow:var(--shadow);
}
#defense-rankings-container .defense-controls{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap }
#defense-rankings-container .pill{
  display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(124,92,255,.35);
  background:linear-gradient(135deg, rgba(124,92,255,.18), rgba(34,211,238,.18));
  font-size:13px; font-weight:600;
}
#defense-rankings-container .pill select{ background:transparent; border:none; color:inherit; font-weight:700 }
#defense-rankings-container .select{
  display:inline-flex; align-items:center; gap:8px; background:var(--card);
  padding:10px 12px; border-radius:12px; border:1px solid transparent; position:relative
}
#defense-rankings-container .select::after{ content:"▾"; position:absolute; right:10px; opacity:.6; pointer-events:none }
#defense-rankings-container .select select{ appearance:none; background:transparent; color:var(--text); border:none; outline:none; font:inherit; padding-right:18px }
#defense-rankings-container .defense-legend{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px }
#defense-rankings-container .defense-legend .dot{ width:10px; height:10px; border-radius:999px; background:linear-gradient(135deg, rgba(124,92,255,.8), rgba(34,211,238,.8)) }

/* Card grid */
#defense-rankings-container .def-cards{ display:grid; gap:10px; margin-top:8px }
#defense-rankings-container .def-card{
  background:var(--panel); border-radius:var(--radius); padding:12px; box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.04); overflow:hidden; cursor:pointer;
}
#defense-rankings-container .card-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px }
#defense-rankings-container .avatar{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--badge-from, rgba(124,92,255,.28)), var(--badge-to, rgba(34,211,238,.22)));
  border:1px solid rgba(255,255,255,.12); font-weight:800;
}
#defense-rankings-container .team{ font-weight:700 }
#defense-rankings-container .rank{ margin-left:auto; color: #00D3BD; font-size:12px; display:flex; align-items:center; gap:8px }
#defense-rankings-container .chev{ transition:transform .25s ease;}
#defense-rankings-container .def-card.expanded .chev{ transform:rotate(180deg) }

/* Stat chips (responsive and sort-highlightable) */
#defense-rankings-container .stats{
  display:grid; gap:6px;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
}
#defense-rankings-container .stat{
  background:var(--card); border:1px solid rgba(255,255,255,.06); padding:10px; border-radius:10px;
  text-align:center; min-width:0; cursor:pointer; transition: box-shadow .2s ease, border-color .2s ease, transform .05s ease;
}
#defense-rankings-container .stat:active{ transform: scale(.98) }
#defense-rankings-container .stat .label{ display:block; font-size:11px; color:var(--muted); margin-bottom:4px }
#defense-rankings-container .stat .value{ display:block; font-weight:700; font-variant-numeric:tabular-nums }
#defense-rankings-container .stat .value {
  color: var(--accent2); 
}

/* Subtle accent for the CURRENT sort stat on every card */
#defense-rankings-container .stat.is-sort{
  border-color: rgba(34,211,238,.35);
  box-shadow: 0 0 0 1px rgba(34,211,238,.20) inset, 0 6px 16px rgba(34,211,238,.10);
  background: linear-gradient(135deg, rgba(124,92,255,.10), rgba(34,211,238,.10));
}

/* Details dropdown */
#defense-rankings-container .details{
  margin-top:10px; 
  max-height:0; overflow:hidden; opacity:0; transition:max-height .35s ease, opacity .35s ease, margin-top .25s ease;
}
#defense-rankings-container .def-card.expanded .details{ max-height:560px; opacity:1; margin-top:12px }
#defense-rankings-container .detail-inner{ padding:10px 2px 4px; display:grid; gap:10px }
#defense-rankings-container .row{ display:grid; gap:8px }
#defense-rankings-container .row h4{ margin:0; font-size:13px; letter-spacing:.2px; color:var(--muted) }
#defense-rankings-container .meta{ color:var(--muted); font-weight:500; margin-left:4px }

/* Detail chips */
#defense-rankings-container .chips{ display:flex; flex-wrap:wrap; gap:6px }
#defense-rankings-container .chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  background:var(--card); border:1px solid rgba(255,255,255,.06); font-size:12px;
}
#defense-rankings-container .chip .tag{ opacity:.85; font-weight:600 }
#defense-rankings-container .chip-stack .stack{ display:inline-flex; gap:4px }
#defense-rankings-container .chip-stack .stack .odds{ opacity:.75; font-size:11px }

#defense-rankings-container .chip .num,
#defense-rankings-container .chip .stack .line,
#defense-rankings-container .chip .odds-num {
  color: var(--accent2);
  font-weight: 700;
}

/* ───────── NEW: Clickable player name looks like text, colored + underlined ───────── */
#defense-rankings-container .linklike {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent2);
  text-decoration: underline;
  cursor: pointer;
}
#defense-rankings-container .linklike:hover,
#defense-rankings-container .linklike:focus {
  text-decoration-thickness: 2px;
  filter: brightness(1.08);
  outline: none;
}
#defense-rankings-container .linklike:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}

/* ───────── NEW: Add (+/✓) button styling on "This week" pills ───────── */
#defense-rankings-container .chip .add-btn{
  display:inline-grid; place-items:center;
  width:22px; height:22px; border-radius:999px;
  margin-left:2px;
  font-weight:800; line-height:1; font-size:14px;
  color:var(--text);
  background: linear-gradient(135deg, rgba(124,92,255,.18), rgba(34,211,238,.18));
  border:1px solid rgba(255,255,255,.14);
  cursor:pointer;
  transition: transform .05s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
#defense-rankings-container .chip .add-btn:hover{
  box-shadow: 0 4px 12px rgba(34,211,238,.12);
  border-color: rgba(34,211,238,.35);
}
#defense-rankings-container .chip .add-btn:active{ transform: scale(.95) }
#defense-rankings-container .chip .add-btn:focus-visible{
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}
#defense-rankings-container .chip .add-btn[disabled]{
  opacity:.6; cursor:not-allowed;
}
#defense-rankings-container .chip .add-btn.added{
  background: linear-gradient(135deg, rgba(52,211,153,.22), rgba(124,92,255,.18));
  border-color: rgba(52,211,153,.45);
}

/* Optional: visually mark a chip whose family is already in parlay */
#defense-rankings-container .chip.defchip--added{
  border-color: rgba(52,211,153,.35);
  box-shadow: 0 0 0 1px rgba(52,211,153,.20) inset, 0 6px 14px rgba(52,211,153,.10);
}

/* Responsive */
@media (max-width:1000px){
  #defense-rankings-button {
    padding: 10px 20px;
    font-size: 32px;
    font-weight: 500;
    margin-top: -90px;
    margin-bottom: 10px;
  }
  #defense-rankings-container .def-back{
    padding: 10px 20px;
    font-size: 32px;
    font-weight: 500;
    width: 150px;
    margin-top: -110px;
    margin-bottom: 20px; 
  }
  #defense-rankings-container {
    width: 950px;
    margin-bottom: 10px;
  }

  #defense-rankings-container .defense-title{ font-size:32px }
  #defense-rankings-container .defense-subtitle{ font-size:24px }
  #defense-rankings-container .pill{ padding:8px 16px; font-size:20px }
  #defense-rankings-container .pill select, #defense-rankings-container .select select{ font-size:24px }
   #defense-rankings-container .defense-controls .select > span{
    font-size: 24px;
  }
  #defense-rankings-container .avatar{
    width:52px; height:52px; border-radius:99px; display:grid; place-items:center;
  }

  #defense-rankings-container .team{ font-weight:700; font-size: 28px; }
  #defense-rankings-container .rank{ font-size:28px; gap: 0px;}
  #defense-rankings-container .rank .chev{
    width: 52px;
    height: 52px;
    transform: translateY(0px);
  }
  #defense-rankings-container .stat {margin-top: 12px;}
  #defense-rankings-container .stat .label{ font-size:24px; }
  #defense-rankings-container .stat .value{ font-size: 24px;  }

  #defense-rankings-container .details{
    margin-top:18px; 
  }
  #defense-rankings-container .row h4{ margin:0; font-size:30px; margin-bottom: 8px; }
  #defense-rankings-container .chip{
    font-size:26px;
    padding: 14px 20px;
  }
  #defense-rankings-container .chip .tag{ opacity:.85; font-weight:600; font-size: 26px; }
  #defense-rankings-container .chip-stack .stack{ display:inline-flex; gap:4px; font-size:26px; }
  #defense-rankings-container .chip-stack .stack .odds{ opacity:.75; font-size:26px; }

  /* Scale the Add button for touch targets */
  #defense-rankings-container .chip .add-btn{
    width:48px; height:48px; font-size:28px; margin-left:8px;
  }
}