/* =====================================================================
   Team Defense Vs. Position report - modern refresh + light/dark theming.
   Loaded IN ADDITION TO fantasysportsco.nbaOpponentMatchup.css (which is
   shared with _nbaOpponentMatchup.cshtml and left untouched). Everything
   here is driven by the shared --fsc-* tokens so the page follows the
   site theme, and the classes are scoped to .defVsPosMainDiv so the
   sibling page is unaffected.
   ===================================================================== */

.defVsPosMainDiv { padding-bottom: 40px; }
.defVsPosMainDiv .sportContentMain { max-width: 1260px; margin: 0 auto; }

/* ---- page hero ---- */
.rg-hero { text-align: center; margin: 0 auto 22px; padding: 34px 16px 0; max-width: 900px; white-space: normal; }
.rg-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(180deg, #2563EB 0%, #1E3A8A 100%);
    color: #fff; padding: 7px 16px; border-radius: 100px;
    font-family: 'Heebo'; font-size: 11px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(30, 58, 138, .32); margin-bottom: 18px;
}
.rg-hero-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; flex-shrink: 0; animation: dvpPulse 1.4s ease-in-out infinite; }
.rg-hero-title {
    display: block; font-family: 'Heebo'; font-size: 50px; font-weight: 900;
    color: var(--fsc-text); letter-spacing: -.028em; line-height: 1.05; margin: 0 0 14px; padding: 0; text-align: center;
}
.rg-hero-title::before { content: none !important; display: none !important; }
.rg-hero-accent { color: #2563EB; background: linear-gradient(180deg, transparent 62%, rgba(37, 99, 235, .18) 62%); padding: 0 2px; }
[data-fsc-theme="dark"] .rg-hero-accent { color: var(--fsc-blue); background: linear-gradient(180deg, transparent 62%, var(--fsc-blue-soft) 62%); }
.rg-hero-for { display: block; font-size: .42em; font-weight: 700; color: var(--fsc-text-soft); letter-spacing: -.005em; margin-top: 10px; line-height: 1.3; }
.rg-hero-lead { display: block; width: auto; margin: 0 auto; max-width: 680px; padding: 0; font-family: 'Heebo'; font-size: 15px; line-height: 1.55; color: var(--fsc-text-soft); font-weight: 400; text-align: center; }
@keyframes dvpPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .rg-hero-badge-dot { animation: none; } }

/* ---- modern segmented filter bar (shared rz* pattern) ---- */
.rzFilters { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 14px 16px; margin: 0 auto 20px; max-width: 1180px; padding: 0 12px; }
.rzGroup { display: inline-flex; flex-direction: column; gap: 6px; }
.rzGroupLbl { font-family: 'Heebo'; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--fsc-text-faint); padding-left: 3px; }
.rzSeg { display: inline-flex; align-items: center; gap: 2px; background: var(--fsc-panel-2); border: 1px solid var(--fsc-line); border-radius: 12px; padding: 3px; flex-wrap: wrap; }
/* .rzSeg prefix + !important on color so the skin's <a>:link/:hover/:visited rules
   (which beat a bare .rzSegBtn) don't override the segmented-button colors. */
.rzSeg .rzSegBtn {
    display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 8px;
    font-family: 'Heebo'; font-size: 13px; font-weight: 600; color: var(--fsc-text-soft) !important;
    cursor: pointer; white-space: nowrap; text-decoration: none !important;
    transition: background-color .12s ease, color .12s ease;
}
.rzSeg .rzSegBtn:hover { color: var(--fsc-text) !important; background: var(--fsc-line); text-decoration: none !important; }
.rzSeg .rzSegBtn.is-active { background: var(--fsc-green-soft); color: var(--fsc-green) !important; font-weight: 800; }

/* ---- charts: labeled navy band + themed panel below ---- */
.headerContainer { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin: 0 auto 22px; max-width: 1180px; padding: 0 12px; }
.halfContainer { flex: 1 1 440px; max-width: 560px; min-width: 280px; padding: 0; margin: 0; display: block; position: relative; }
.defVpCard { background: var(--fsc-panel); border: 1px solid var(--fsc-line); border-radius: 14px; overflow: hidden; box-shadow: var(--fsc-shadow-sm); }
.ownershipHeader {
    font-size: 15px; font-weight: 800; font-family: 'Heebo', sans-serif;
    color: #fff; text-align: center; padding: 16px 18px; width: 100%; margin: 0;
    background: var(--fsc-nav);
}
.ownershipTextSmall { font-size: 12px; font-weight: 500; font-family: 'Heebo', sans-serif; color: rgba(255,255,255,.82); text-align: center; margin-top: 6px; line-height: 1.4; }
.defVpChart { padding: 8px 8px 4px; }

/* ---- table (shared .genericTable base is theme-aware; add a rounded frame) ---- */
.rzTableWrap { max-width: 1260px; margin: 0 auto; overflow-x: auto; border: 1px solid var(--fsc-line); border-radius: 12px; scrollbar-width: thin; }
.defVsPosMainDiv .genericTable { width: 100%; margin: 0; }
.defVsPosMainDiv .genericTable > tbody > tr > td { overflow: hidden; }

/* heat cells: JS tags top/bottom 20% cells with .good / .bad */
.defVsPosMainDiv .genericTable td.good { color: var(--fsc-green) !important; background: var(--fsc-green-soft) !important; font-weight: 600; }
.defVsPosMainDiv .genericTable td.bad { color: var(--fsc-danger) !important; background: var(--fsc-danger-soft) !important; font-weight: 600; }

/* thin vertical section dividers between the two data blocks */
.tabledivider { max-width: 4px; width: 4px; min-width: 4px !important; padding: 0 !important; line-height: 0 !important; background: var(--fsc-line-strong); }

/* team cell + rank chips */
.teamCell {
    display: flex; flex-flow: row; justify-content: center; text-align: center; align-items: center;
    font-weight: 800 !important; font-size: 16px !important; color: var(--fsc-text);
}
.teamCell > img { height: 32px; }
.teamRank { display: inline-flex; flex-flow: column; font-family: 'Heebo'; font-weight: 400; font-size: 12px; color: var(--fsc-text-soft); margin-left: 15px; }
.teamOppRank {
    display: inline-block; font-family: 'Heebo'; font-weight: 500; font-size: 13px; letter-spacing: .01em;
    border-radius: 3px; text-align: center; align-self: center; padding: 3px;
}
.oppRankBad { background-color: #EF4444; color: #ffffff; }
.oppRankGood { background-color: #10B981; color: #ffffff; }
.oppRankNeutral { background-color: #E5E7EB; color: #1F2937; }
[data-fsc-theme="dark"] .oppRankNeutral { background-color: var(--fsc-line); color: var(--fsc-text); }

.defVsPosMainDiv .playername { font-family: 'Heebo'; font-weight: 500; font-size: 13px; line-height: 14px; color: var(--fsc-text); }
.nosort { cursor: default !important; }

/* empty-state row */
.defVpNoData { padding: 20px; font-size: 22px; text-align: center; color: var(--fsc-danger); font-weight: 800; background: var(--fsc-panel); }

/* ---- loading ---- */
.defVsPosMainDiv .rippleanim { text-align: center; font-family: 'Heebo'; color: var(--fsc-text-soft); padding: 32px 10px; }

@media (max-width: 768px) {
    .rg-hero-title { font-size: 34px; }
    .rg-hero-for { font-size: .5em; }
    .rg-hero-lead { font-size: 14px; }
    .rzFilters { gap: 12px; }
    .halfContainer { flex: 1 1 100%; max-width: 100%; }
}
@media (max-width: 480px) { .rg-hero-title { font-size: 27px; } }