:root{
  --df-bg:       #dbd3be;   /* page background */
  --df-surface:     #225522;   /* card gradient start */
  --df-surface-alt:   #122c12;   /* card gradient end */
  --df-border-subtle: #31384b;   /* subtle border */
  --df-text-dark:      rgb(24, 24, 27);   /* primary text */
  --df-text-light:      azure;   /* primary text */
  --df-text-muted:    #6d6f80;   /* secondary text */
  --df-accent:   #225536;   /* azure */
  --df-accent-soft: #e2f1e7;   /* deep navy */
  --df-accent-contrast:     #0f2a1a;   /* lines/borders */

  --color-good: #39c46b;
  --color-bad: #e05252;
  --color-neutral-chip: #38405a;

  --df-radius: 16px;
  --df-shadow: 0 6px 20px rgba(0,0,0,.3);
  --df-col-w: clamp(260px, 85vw, 340px); /* per-round width on mobile */
  --df-gap: 16px;
}


/* Utility classes */
.img-90{ max-width:90px !important; }
.img-40{ width:40px; height:40px; object-fit:cover; }
.avatar-64{ width:65px; height:65px; border-radius:20%; object-fit:cover;}
.wth_300 { width:300px; height:auto; margin-bottom:10px;}
.link-azure{ color:var(--azure); text-decoration:none; } /* for hyperlinks */
.hide{ display:none !important; visibility:hidden !important; }
.wth_auto { width:auto; height:auto; margin-bottom:0px;}

/* main header */
.header-bg {
  background: linear-gradient(180deg, var(--df-accent), var(--df-accent-contrast));
;
  
}

/* league header */
.league_header-bg {
  background: linear-gradient(180deg, var(--df-accent-contrast), var(--df-accent));
  border-radius:  var(--df-radius);
}
.btn-df-legacy {
  background-color: var(--df-accent);
  color: var(--df-text-dark);
  border: 1px solid rgba(255,255,255,0.25);
  font-size: 0.875rem;       /* ~“smaller” */
  line-height: 1.2;
  padding: 0.4rem 0.75rem;   /* compact like your inline */
  border-radius: 10px;       /* subtle rounded corners */
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  text-decoration: none;
}
.btn-df-legacy:hover,
.btn-df-legacy:focus {
  background-color:  var(--df-surface); /* a touch lighter/darker for feedback */
  color: var(--df-text-light);
  border-color: rgba(255,255,255,0.35);
  text-decoration: none;
}
.btn-df-legacy:active {
  transform: translateY(1px);
  box-shadow: 0 0 0 rgba(0,0,0,0.25);
}

/* team header */
.team_header-bg {
  background: linear-gradient(180deg, var(--df-accent-contrast), var(--df-accent));
  border-radius:  var(--df-radius);
  padding: 10px;
}


.main_bg {
  background: linear-gradient(180deg, var(--df-bg), var(--df-bg));
  color: var(--df-text-dark);
}

.alt_bg {
  background: linear-gradient(180deg, var(--df-accent-contrast), var(--df-accent));
  color: var(--df-text-light);
}

.main-content{ width:100%; padding:20px; }

.content_fit {
  width: fit-content;
  height: 100%;
  margin: auto;
  padding: 10px;
  margin: 5px;
  border-radius: var(--df-radius);
  background: linear-gradient(180deg, var(--df-accent-contrast), var(--df-accent));
  box-shadow: var(--df-shadow);
}


.table-df {
  width: 100%;
  border: none;
  border-collapse: collapse; /* Prevents double borders */
  border-radius: var(--df-radius);
  box-shadow: var(--df-shadow);
  text-align: center;
  tr:hover td {
    background-color: var(--df-surface-alt);
    color: var(--df-text-light);
    
    cursor: pointer;
  } 
  th, td {
  border: none;
  }
  thead{
    border-bottom: 1px solid var(--df-text-light);
  }
}


/* ===========================
   Roster tables (responsive)
   =========================== */
.roster-table-wrap{ width:100%; }
@media (max-width: 768px){
  .roster-table-wrap{ overflow-x:auto; }
}
.roster-block #tableView table,
.roster-block #tableView th,
.roster-block #tableView td{
  font-size: clamp(0.8rem, 2.2vw, 1rem);
}
.player-photo{ width:40px; height:40px; object-fit:cover; }
.sectionLabel{ text-transform:uppercase; }

/* rank stuff */
/* Just a hair wider + room for the stepper arrows */
.winput{
  width: 7.5ch;        /* fits values like -999.9 comfortably */
  
  text-align: left;   /* optional: nicer for numbers */
}

/* If you want slightly wider on very small screens */
@media (max-width: 480px){
  .winput{ width: 8ch; }
}

/* Pic column hide on small */
@media (max-width: 768px){
  .pic-column{ display:none; }
}

/* ===========================
   Trade block
   =========================== */
.trade-summary{
  background:var(--df-accent);
  border:1px solid var(--df-border-subtle);
  box-shadow:0 4px 10px var(--df-border-subtle);
}
.trade-card{
  background:var(--df-accent);
  color:#fff;
  border-radius:10px;
  padding:15px;
  margin-bottom:20px;
  border:1px solid #1e1e1e;
  box-shadow:0 4px 8px rgba(255,255,255,0.1);
}
.trade-header{
  font-size:20px; font-weight:700;
  text-align:center;
  padding-bottom:10px;
  border-bottom:2px solid #fff;
}
.trade-content{
  display:flex; gap:16px; align-items:flex-start;
  justify-content:space-between; padding-top:10px;
}
.team-section{ width:45%; text-align:center; }
.vs{ font-size:22px; font-weight:700; align-self:center; }
.trade-list{ list-style:none; padding:0; margin:0; }
.trade-list li{
  background:var(--df-accent-contrast);
  padding:8px 10px; margin:5px 0;
  border-radius:5px; color:#e8ecff;
}
@media (max-width: 768px){
  .trade-content{ flex-direction:column; align-items:stretch; }
  .team-section{ width:100%; }
  .vs{ align-self:center; margin:6px 0; }
}

/* ===========================
   Draft Room (grid + cards)
   =========================== */
.draft-row{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap:16px; align-items:stretch;
}

/* Card + flip */
.pick-card{
  position:relative;
  width:100%;
  aspect-ratio:5 / 7;      /* roomy card */
  border-radius:var(--radius);
  perspective:1000px;
  cursor:pointer;
}
.pick-inner{
  position:relative;
  width:100%; height:100%;
  transition:transform .8s;
  transform-style:preserve-3d;
}
.pick-card.flipped .pick-inner{ transform: rotateY(180deg); }

.pick-face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  border:2px solid #ccc;
  border-radius:var(--radius);
  background:var(--df-accent);
  color:var(--df-text-light);
  display:flex; flex-direction:column;
  align-items:center; justify-content:space-evenly;
  padding:12px; text-align:center;
  box-shadow:2px 2px 5px rgba(0,0,0,.1);
}
.pick-front{}
.pick-back{ transform:rotateY(180deg); overflow-y:auto; }

.pick-number{ font-size:clamp(1rem, 1.2vw, 1.1rem); font-weight:700; }
.player-name{ font-size:clamp(1rem, 1.4vw, 1.15rem); font-weight:700; }
.owner-info, .original-owner, .pick-value, .flip-instruction{
  font-size:clamp(.9rem, 1.1vw, 1rem);
}
.flip-instruction{ color:#f39c12; }
.pick-img{
  width:90px; height:90px;
  border-radius:50%; object-fit:cover;
}

@media (max-width: 420px){
  .draft-row{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}







/* ===========================
   Bracket
   =========================== */

/* ===== Bracket Layout (horizontal scroll on mobile) ===== */
.df-bracket{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--df-col-w);
  gap: var(--df-gap);
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.df-bracket::-webkit-scrollbar{ height: 10px; }
.df-bracket::-webkit-scrollbar-thumb{
  background: linear-gradient(90deg, var(--df-accent), var(--df-accent-soft));
  border-radius: 999px;
}

.df-round{
  display: flex; flex-direction: column; gap: 12px; scroll-snap-align: start;
}
.df-round__header{
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(11,16,32,.95), rgba(11,16,32,.65));
  backdrop-filter: blur(4px);
  padding: 8px 10px;
  border-radius: calc(var(--df-radius) - 8px);
  border: 1px solid rgba(41,160,255,.25);
  box-shadow: var(--df-shadow);
}
.df-h2{ margin:0; font-size: 14px; letter-spacing:.4px; text-transform: uppercase; color:#dbe7ff; }

/* ===== Match Card ===== */
.df-match{
  background: linear-gradient(180deg, var(--df-accent), var(--df-accent-contrast));
  border: 1px solid var(--df-line);
  border-left: 4px solid var(--df-accent);
  border-radius: var(--df-radius);
  box-shadow: var(--df-shadow);
  overflow: clip;
  cursor: pointer;
}
.df-match + .df-match{ margin-top: 2px; }
.df-match__link{ display:block; color: inherit; text-decoration: none; }
.df-match__link:focus,
.df-match__link:hover{ text-decoration: none; }
.df-match__body{ display: grid; gap: 2px; padding: 8px; }

/* ===== Team Row ===== */
.df-team{
  display: grid;
  grid-template-columns: 36px 1fr auto; /* logo | name | seed/score */
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
}
.df-team--b{ background: rgba(255,255,255,.015); }

/* Bracket logos: show the full image within the circle */
.df-logo{
  width: 36px;             /* or 48px on some pages; keep consistent with your design */
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(41,160,255,.25), rgba(16,21,94,.6));
  border: 1px solid rgba(41,160,255,.35);
  box-shadow: inset 0 0 0 2px rgba(11,16,32,.6);
}

.wth_300{
  width:300px;
  height:auto;
  margin-bottom:10px;
}

.df-logo__img{
  width: 100%;
  height: 100%;
  object-fit: contain;     /* <— key: keep full image visible */
  object-position: center;
  display: block;
  image-rendering: auto;   /* keep it crisp */
  background: transparent; /* optional: no extra fill */
}


/* ===========================
   Matchup Unit (MU) styles
   =========================== */

.mu-wrap{
  padding:20px 12px 28px;
  max-width:1400px;
  
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:16px;
  color: var(--df-text-light);
 
  border-radius: 0; /* keep as a page section */
}

.mu-title{
  display:flex; align-items:center; gap:12px; padding:6px 2px;
}
.mu-h1{ margin:0; font-weight:700; letter-spacing:.3px; font-size: clamp(18px, 2.5vw, 24px); }
.mu-subtitle{ color: var(--df-text-muted); font-size: 12px; margin-top: -2px; }

/* Actions strip (reuses your .btn/.btn-df if present) */
.mu-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.btn-df{
  background:#0b1020; color:azure; border:1px solid var(--df-line);
  padding:.5rem .9rem; border-radius:8px; font-size:12px; text-decoration:none; display:inline-block;
}
.btn-df:hover, .btn-df:focus{ color:azure; opacity:.9; transform: translateY(-1px); }

/* Match header card */
.mu-match{
  background: linear-gradient(180deg, var(--df-accent-contrast), var(--df-accent));
  border:1px solid var(--df-line);
  border-left:4px solid var(--df-accent);
  border-radius:var(--df-radius);
  box-shadow:var(--df-shadow);
  overflow: clip;
}
.mu-match__body{ display:grid; gap:8px; padding:10px; }

.mu-header{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap:10px;
}
@media (max-width: 640px){
  .mu-header{ grid-template-columns: 1fr; gap:8px; }
  .mu-vs{ order:-1; }
}

/* Team block */
.mu-team{
  display:grid;
  grid-template-columns: 48px 1fr auto;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:12px;
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.04);
  min-width:0;
}
.mu-team--b{ background: rgba(255,255,255,.015); }

/* Logo with fallback initials */
.mu-logo{
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  background: linear-gradient(135deg, rgba(41,160,255,.25), rgba(16,21,94,.6));
  border:1px solid rgba(41,160,255,.35);
  box-shadow: inset 0 0 0 2px rgba(11,16,32,.6);
  font-size:12px; font-weight:700; color:#eaf3ff;
  flex:0 0 48px;
}
.mu-logo__img{ width:100%; height:100%; object-fit:cover; display:block; }
.mu-logo__fallback{ font-size:12px; font-weight:700; color:#eaf3ff; }

/* Text + meta */
.mu-name{ font-size:14px; font-weight:600; line-height:1.2; min-width:0; }
.mu-name span{ display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.mu-muted{ color: var(--df-text-mute); }
.mu-muted-sm{ font-size:12px; }

.mu-meta{ justify-self:end; text-align:right; }
.mu-seed{ font-size:12px; color: var(--df-text-mute); }
.mu-score{ font-size:16px; font-weight:800; color:#fff; }
.mu-num{ font-variant-numeric: tabular-nums; }

.mu-vs{ display:grid; place-items:center; padding:0 8px; font-weight:800; color:#fff; }
.mu-week{ font-size:11px; color:#cfe1ff; opacity:.9; }

/* Lineups table */
.mu-card{
  background: linear-gradient(180deg, var(--df-accent-contrast), var(--df-accent));
  border:1px solid var(--df-line);
  border-radius:var(--df-radius);
  box-shadow:var(--df-shadow);
  overflow:hidden;
}
.mu-table-wrap{ overflow:auto; }

.mu-lineups{ width:100%; border-collapse: collapse; }
.mu-lineups thead th{
  font-size:12px; color:#cfe1ff; text-transform:uppercase; letter-spacing:.3px;
  padding:10px 8px;
  border: 1px solid var(--df-line);
  background: transparent;
}
.mu-lineups td{
  padding:10px 8px;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  border-left:1px solid var(--df-line);
  border-right:1px solid var(--df-line);
  color: azure;
  font-size:14px;
  background: transparent;
}
.mu-pos{ font-weight:700; color:#dbe7ff; white-space:nowrap; }
.mu-td-right{ text-align:right; }
.mu-td-left{ text-align:left; }
.mu-center{ text-align:center; }

.mu-lineups tbody tr:nth-child(odd)  { background: var(--mu-row-odd); }
.mu-lineups tbody tr:nth-child(even) { background: var(--mu-row-even); }

@media (max-width: 900px){
  .mu-name{ font-size:13px; }
  .mu-score{ font-size:15px; }
}
.name-2ln{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* Sticky table header */
.df-sticky-head th {
  position: sticky;
  top: 0;                 /* if you have a fixed navbar, set this to its height (e.g., 56px) */
  z-index: 3;             /* above body cells */
  background: rgba(28,31,36,.98); /* match your dark theme */
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 6px 10px rgba(0,0,0,.25);
}

/* Optional: sticky first column so names never scroll off horizontally */
.df-sticky-firstcol td:first-child,
.df-sticky-firstcol th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;            /* keep under header (z=3) */
  background: #121417;   /* match your table bg */
  border-right: 1px solid rgba(255,255,255,.05);
}


/* Make the table area the scroll container */
.df-sticky-wrap {
  max-height: 70vh;      /* adjust to taste */
  overflow-y: auto;
  overflow-x: auto;      /* preserves Bootstrap's horizontal scroll */
}

/* Sticky header row */
.df-sticky-head th {
  position: sticky;
  position: -webkit-sticky; /* Safari */
  top: 0;                   /* set to your fixed navbar height if you have one */
  z-index: 3;
  background: rgba(28,31,36,.98);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 6px 10px rgba(0,0,0,.25);
}

/* Sticky is happier with separate borders */
.table.df-sticky {
  border-collapse: separate;
  border-spacing: 0;
}

/* ---- DynastyFiend: Modern Scrollbar for tables ---- */
.df-scroll {
  /* Tweak theme here */
  --df-scroll-accent: var(--bs-primary, #0d6efd); /* active/drag color */
  --df-scroll-track: #14171c;                     /* track */
  --df-scroll-thumb: #2a2f36;                     /* thumb idle */
  --df-scroll-thumb-hover: #3a404a;               /* thumb hover */

  /* Keeps layout from shifting when the bar appears */
  scrollbar-gutter: stable both-edges;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--df-scroll-thumb) var(--df-scroll-track);
}

/* WebKit (Chrome/Edge/Safari) */
.df-scroll::-webkit-scrollbar {
  width: 11px;            /* vertical */
  height: 11px;           /* horizontal, if present */
}

.df-scroll::-webkit-scrollbar-track {
  background: var(--df-scroll-track);
  border-radius: 999px;
}

.df-scroll::-webkit-scrollbar-thumb {
  background: var(--df-scroll-thumb);
  border: 2px solid var(--df-scroll-track); /* creates the gap ring */
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.35);
}

.df-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--df-scroll-thumb-hover);
}

.df-scroll::-webkit-scrollbar-thumb:active {
  background: var(--df-scroll-accent);
  border-color: color-mix(in oklab, var(--df-scroll-accent), transparent 70%);
}

.df-scroll::-webkit-scrollbar-corner {
  background: var(--df-scroll-track);
}

/* Optional: slightly round the clip area at the right edge */
.df-scroll {
  border-right: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
/* Just a hair wider + room for the stepper arrows */
.winput{
  width: 7.5ch;        /* fits values like -999.9 comfortably */
  
  text-align: left;   /* optional: nicer for numbers */
}

/* If you want slightly wider on very small screens */
@media (max-width: 480px){
  .winput{ width: 8ch; }
}