/* ══════════════════════════════════════════════════════════════
 * Dynasty Nerds Depth Charts — Broadcast Tactical Almanac
 * All classes prefixed with dndc-
 * Heavy !important to survive Elementor / Hello reset.
 * ══════════════════════════════════════════════════════════════ */

.dndc-widget {
  --dndc-red:        #B2150D !important;
  --dndc-red-deep:   #7a0d07 !important;
  --dndc-red-tint:   rgba(178, 21, 13, 0.06) !important;
  --dndc-red-glow:   rgba(178, 21, 13, 0.18) !important;
  --dndc-ink:        #0a0d16 !important;
  --dndc-ink-soft:   #2a2f3d !important;
  --dndc-paper:      #ffffff !important;
  --dndc-paper-2:    #faf8f5 !important;
  --dndc-paper-3:    #f1efe9 !important;
  --dndc-line:       #e8e3d8 !important;
  --dndc-line-soft:  #f0ece2 !important;
  --dndc-faint:      #8a8478 !important;

  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background: var(--dndc-paper) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  color: var(--dndc-ink) !important;
  box-shadow:
    0 1px 0 rgba(178, 21, 13, 0.05),
    0 24px 60px -28px rgba(10, 13, 22, 0.3),
    0 8px 24px -10px rgba(10, 13, 22, 0.12) !important;
  border: 1px solid var(--dndc-line) !important;
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
}

/* Player cells should look clickable now that they open the modal */
.dndc-player[data-espn-id] {
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}
.dndc-player[data-espn-id]:hover {
  background: rgba(178, 21, 13, 0.04) !important;
}
.dndc-player[data-espn-id]:focus {
  outline: 2px solid rgba(178, 21, 13, 0.4) !important;
  outline-offset: 2px !important;
}
.dndc-widget *  { box-sizing: border-box !important; }
.dndc-widget img { max-width: none !important; }
.dndc-widget button { font-family: inherit !important; }

/* ════════════════════════════════════════════════════════════
 * HEADER — dark navy gradient (matches Combine Tracker / Trade Calc)
 * ════════════════════════════════════════════════════════════ */
.dndc-header {
  text-align: center !important;
  padding: 32px 24px 18px !important;
  background: linear-gradient(180deg, #0f1f33 0%, #1a2f4a 100%) !important;
  color: #fff !important;
  position: relative !important;
}

.dndc-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.65) !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
}
.dndc-eyebrow-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7) !important;
  animation: dndc-pulse 2.4s ease-out infinite !important;
}
@keyframes dndc-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0); }
}

.dndc-heading {
  font-family: 'Teko', 'Inter', sans-serif !important;
  font-size: 38px !important;
  line-height: 1.1 !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin: 0 0 6px 0 !important;
  color: #fff !important;
  display: block !important;
  text-align: center !important;
  text-shadow: none !important;
}
.dndc-heading-mark {
  display: inline !important;
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important;
  transform: none !important;
  box-shadow: none !important;
  position: static !important;
}
.dndc-heading-mark > span {
  display: inline !important;
  transform: none !important;
}

.dndc-subheading {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  color: rgba(255,255,255,0.7) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  margin: 0 !important;
  max-width: none !important;
  text-align: center !important;
}

/* ════════════════════════════════════════════════════════════
 * CONTROLS — sticky dark navy bar (matches Combine Tracker)
 * ════════════════════════════════════════════════════════════ */
.dndc-controls {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  background: #1a2f4a !important;
  padding: 12px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}

.dndc-tabs {
  display: flex !important;
  gap: 6px !important;
  padding: 0 !important;
  background: transparent !important;
  align-self: auto !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
}

.dndc-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  position: relative !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
}
.dndc-tab::after { display: none !important; }
.dndc-tab:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #e2e8f0 !important;
}
.dndc-tab.dndc-tab-active {
  color: #fff !important;
  border-color: transparent !important;
}
.dndc-tab.dndc-tab-active[data-pos="QB"] { background: #8B1A1A !important; }
.dndc-tab.dndc-tab-active[data-pos="RB"] { background: #2d8a4e !important; }
.dndc-tab.dndc-tab-active[data-pos="WR"] { background: #5b21b6 !important; }
.dndc-tab.dndc-tab-active[data-pos="TE"] { background: #c2410c !important; }
.dndc-tab.dndc-tab-active[data-pos="K"]  { background: #475569 !important; }

.dndc-search-wrap {
  position: relative !important;
  flex: 1 !important;
  max-width: none !important;
  min-width: 200px !important;
}
.dndc-search {
  width: 100% !important;
  padding: 7px 12px 7px 36px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,0.04) !important;
  color: #fff !important;
  outline: none !important;
  transition: all 0.15s !important;
}
.dndc-search::placeholder { color: #94a3b8 !important; }
.dndc-search:focus {
  border-color: rgba(255,255,255,0.3) !important;
  background: rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}
.dndc-search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 14px !important;
  height: 14px !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
}

/* ════════════════════════════════════════════════════════════
 * GRID — column rhythm w/ vertical hairlines
 * ════════════════════════════════════════════════════════════ */
.dndc-grid-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background:
    /* faint vertical pin-stripes for tactical column rhythm */
    linear-gradient(180deg, var(--dndc-paper-2) 0%, var(--dndc-paper) 200px) !important;
}
.dndc-grid {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
}

.dndc-grid thead th {
  font-family: 'Teko', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 2.4px !important;
  color: var(--dndc-faint) !important;
  background: var(--dndc-paper-3) !important;
  padding: 14px 14px !important;
  text-align: left !important;
  border-bottom: 2px solid var(--dndc-ink) !important;
  border-right: 1px solid var(--dndc-line-soft) !important;
  position: static !important;
  white-space: nowrap !important;
}
.dndc-grid thead th:last-child { border-right: none !important; }
.dndc-grid thead .dndc-th-starter {
  color: var(--dndc-red) !important;
  background: var(--dndc-paper-3) !important;
  border-bottom: 2px solid var(--dndc-red) !important;
  position: relative !important;
}
.dndc-grid thead .dndc-th-starter::before {
  content: '' !important;
  position: absolute !important;
  left: 0; right: 0; bottom: -2px !important;
  height: 6px !important;
  background: linear-gradient(180deg, var(--dndc-red) 0%, transparent 100%) !important;
  pointer-events: none !important;
  opacity: 0.5 !important;
}
.dndc-th-num {
  display: inline-block !important;
  font-family: 'Teko', sans-serif !important;
  font-size: 16px !important;
  color: var(--dndc-ink) !important;
  font-weight: 700 !important;
  margin-right: 8px !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  vertical-align: -2px !important;
}
.dndc-grid thead .dndc-th-starter .dndc-th-num { color: var(--dndc-red) !important; }

.dndc-col-team { width: 130px !important; min-width: 130px !important; }
.dndc-col-slot { width: auto !important; min-width: 200px !important; }
.dndc-th-starter { min-width: 240px !important; }

/* Freeze the team column on horizontal scroll */
.dndc-grid thead th:first-child,
.dndc-grid tbody td:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 4 !important;
  background: var(--dndc-paper) !important;
  box-shadow: 8px 0 12px -8px rgba(10, 13, 22, 0.18) !important;
}
.dndc-grid thead th:first-child {
  background: var(--dndc-paper-3) !important;
  z-index: 6 !important;
}
.dndc-row:hover > td:first-child {
  background: var(--dndc-paper-2) !important;
}

.dndc-grid tbody td {
  padding: 14px 14px !important;
  border-bottom: 1px solid var(--dndc-line-soft) !important;
  border-right: 1px solid var(--dndc-line-soft) !important;
  vertical-align: middle !important;
  background: var(--dndc-paper) !important;
  position: relative !important;
}
.dndc-grid tbody td:last-child { border-right: none !important; }
.dndc-grid tbody tr:last-child td { border-bottom: none !important; }

/* Team-color stripe on left edge — the team identity signature */
.dndc-row > td:first-child {
  padding-left: 22px !important;
  position: relative !important;
}
.dndc-row > td:first-child::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 5px !important;
  background:
    linear-gradient(180deg,
      var(--team-color, var(--dndc-red)) 0%,
      var(--team-color, var(--dndc-red)) 100%) !important;
  transition: width 0.2s ease !important;
}
.dndc-row:hover > td:first-child::before { width: 9px !important; }
.dndc-row:hover > td { background: var(--dndc-paper-2) !important; }

/* Starter cell — broadcast hero block */
.dndc-cell-starter {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--team-color, #B2150D) 12%, transparent) 0%,
    color-mix(in srgb, var(--team-color, #B2150D) 4%, transparent) 35%,
    transparent 80%
  ) !important;
  position: relative !important;
}
.dndc-row:hover .dndc-cell-starter {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--team-color, #B2150D) 18%, transparent) 0%,
    color-mix(in srgb, var(--team-color, #B2150D) 6%, transparent) 40%,
    transparent 80%
  ) !important;
}
/* Diagonal red corner clip on starter — broadcast accent */
.dndc-cell-starter::after {
  content: '' !important;
  position: absolute !important;
  top: 0; right: 0 !important;
  width: 24px; height: 24px !important;
  background: linear-gradient(225deg, color-mix(in srgb, var(--team-color, #B2150D) 70%, transparent) 50%, transparent 50%) !important;
  pointer-events: none !important;
  opacity: 0.6 !important;
}

/* Subtle row entrance — transform only, never breaks visibility */
.dndc-row {
  animation: dndc-row-in 0.34s cubic-bezier(.2,.7,.3,1) backwards !important;
}
@keyframes dndc-row-in {
  from { transform: translateY(6px); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .dndc-row { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════
 * TEAM CELL — enlarged identity block
 * ════════════════════════════════════════════════════════════ */
.dndc-team-cell {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.dndc-team-logo {
  width: 42px !important;
  height: 42px !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  filter: drop-shadow(0 2px 3px rgba(10, 13, 22, 0.08)) !important;
  transition: transform 0.2s ease !important;
}
.dndc-row:hover .dndc-team-logo { transform: scale(1.06) !important; }
.dndc-team-text {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1 !important;
  min-width: 0 !important;
}
.dndc-team-abbr {
  font-family: 'Teko', sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  color: var(--dndc-ink) !important;
  line-height: 1 !important;
}
.dndc-team-name {
  font-family: 'Source Sans Pro', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  color: var(--dndc-faint) !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
}

/* ════════════════════════════════════════════════════════════
 * PLAYER CELL — depth cascade w/ hero starter
 * ════════════════════════════════════════════════════════════ */
.dndc-player {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  position: relative !important;
}

/* Rank chip — small Teko number, red on starter, faint on depth */
.dndc-rank-chip {
  font-family: 'Teko', sans-serif !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  text-align: center !important;
  line-height: 0.85 !important;
  font-size: 14px !important;
  width: 16px !important;
  color: var(--dndc-faint) !important;
  letter-spacing: 0 !important;
}
.dndc-cell-starter .dndc-rank-chip {
  color: var(--dndc-red) !important;
}

.dndc-player-img-wrap {
  position: relative !important;
  flex-shrink: 0 !important;
}
.dndc-player-img {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: linear-gradient(180deg, #f3f0e8, #e8e3d8) !important;
  border: 2px solid var(--dndc-paper) !important;
  box-shadow: 0 0 0 1px var(--dndc-line) !important;
  display: block !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
/* Starter — only addition is the team-color ring + lift shadow */
.dndc-cell-starter .dndc-player-img {
  box-shadow:
    0 0 0 2.5px var(--team-color, var(--dndc-red)),
    0 6px 14px -4px rgba(10, 13, 22, 0.28) !important;
}
.dndc-row:hover .dndc-player-img { transform: translateY(-1px) !important; }
.dndc-row:hover .dndc-cell-starter .dndc-player-img {
  transform: translateY(-2px) !important;
  box-shadow:
    0 0 0 2.5px var(--team-color, var(--dndc-red)),
    0 10px 22px -6px rgba(10, 13, 22, 0.36) !important;
}

/* ── player text ── */
.dndc-player-text {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  line-height: 1.1 !important;
}
.dndc-player-name {
  font-family: 'Source Sans Pro', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--dndc-ink) !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 160px !important;
}
.dndc-cell-starter .dndc-player-name {
  font-size: 15.5px !important;
  letter-spacing: -0.1px !important;
  max-width: 220px !important;
}
.dndc-depth-4 .dndc-player-name,
.dndc-depth-5 .dndc-player-name,
.dndc-depth-6 .dndc-player-name {
  color: var(--dndc-ink-soft) !important;
  font-weight: 600 !important;
}

.dndc-player-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
  font-family: 'Teko', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
/* Position rank — tier-colored to signal dynasty value at a glance.
 *  top  (1–12)   = brand red  → startable dynasty asset
 *  mid  (13–30)  = navy        → useful depth piece
 *  low  (31+)    = slate       → roster filler
 */
.dndc-meta-rank {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 1px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}
.dndc-meta-rank-pos {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}
.dndc-meta-rank-num {
  font-size: 16px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}

.dndc-meta-rank-top,
.dndc-meta-rank-top .dndc-meta-rank-pos,
.dndc-meta-rank-top .dndc-meta-rank-num { color: #B2150D !important; }

.dndc-meta-rank-mid,
.dndc-meta-rank-mid .dndc-meta-rank-pos,
.dndc-meta-rank-mid .dndc-meta-rank-num { color: #1a2f4a !important; }

.dndc-meta-rank-low,
.dndc-meta-rank-low .dndc-meta-rank-pos,
.dndc-meta-rank-low .dndc-meta-rank-num { color: #64748b !important; }

/* Larger in the starter cell, tier color still wins */
.dndc-cell-starter .dndc-meta-rank-pos { font-size: 14px !important; }
.dndc-cell-starter .dndc-meta-rank-num { font-size: 18px !important; }

.dndc-meta-sep {
  color: var(--dndc-line) !important;
  font-weight: 400 !important;
}
.dndc-meta-pos { color: var(--dndc-faint) !important; }
.dndc-meta-value { color: var(--dndc-ink-soft) !important; }

/* Empty depth slot — graceful negative space */
.dndc-player-empty {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 44px !important;
  color: var(--dndc-line) !important;
  font-family: 'Teko', sans-serif !important;
}
.dndc-player-empty-num {
  font-size: 13px !important;
  font-weight: 700 !important;
  width: 16px !important;
  text-align: center !important;
  color: var(--dndc-line) !important;
  flex-shrink: 0 !important;
}
.dndc-player-empty-dash {
  width: 56px !important;
  height: 1px !important;
  background: var(--dndc-line) !important;
  flex-shrink: 0 !important;
}

/* No-results row */
.dndc-noresults {
  padding: 48px 24px !important;
  text-align: center !important;
  color: var(--dndc-faint) !important;
  font-family: 'Teko', sans-serif !important;
  font-size: 22px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

/* ════════════════════════════════════════════════════════════
 * FOOTER
 * ════════════════════════════════════════════════════════════ */
.dndc-footer {
  padding: 14px 28px !important;
  text-align: center !important;
  font-family: 'Teko', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--dndc-faint) !important;
  border-top: 1px solid var(--dndc-line) !important;
  background: var(--dndc-paper-3) !important;
  margin: 0 !important;
}
.dndc-footer a {
  color: var(--dndc-red) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}
.dndc-footer a:hover { text-decoration: underline !important; }

/* ════════════════════════════════════════════════════════════
 * RESPONSIVE
 * ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .dndc-header { padding: 24px 18px 20px !important; }
  .dndc-heading { font-size: 44px !important; gap: 10px !important; }
  .dndc-heading-mark { padding: 1px 10px 3px !important; }
  .dndc-subheading { max-width: 100% !important; }
  .dndc-controls { padding: 0 12px !important; }
  .dndc-tab { padding: 14px 14px !important; font-size: 18px !important; }
  .dndc-grid thead th,
  .dndc-grid tbody td { padding: 10px 11px !important; }
  /* Keep all 6 lineup columns rendered on tablet/mobile — user scrolls horizontally */
  .dndc-col-slot { min-width: 150px !important; }
  .dndc-team-name { display: none !important; }
  .dndc-player-name { max-width: 110px !important; font-size: 12px !important; }
  .dndc-cell-starter .dndc-player-name { font-size: 13.5px !important; max-width: 130px !important; }
  .dndc-player-img { width: 46px !important; height: 46px !important; }
  .dndc-player-empty-dash { width: 46px !important; }
}

@media (max-width: 560px) {
  .dndc-heading { font-size: 32px !important; }
  /* On phone, narrow each lineup column further but still keep all 6 scrollable */
  .dndc-col-slot { min-width: 130px !important; }
  .dndc-player-img { width: 38px !important; height: 38px !important; }
  .dndc-player-empty-dash { width: 38px !important; }
  .dndc-team-logo { width: 34px !important; height: 34px !important; }
  .dndc-team-abbr { font-size: 22px !important; }
  .dndc-rank-chip { font-size: 12px !important; }
}