/* just doing imports as hack for satisfying local and hosted */
@import url("fonts.css");
@import url("base.css");
@import url("header.css");
@import url("colors.css");

#page-container {
  position: relative;
  min-height: 100vh;
}

#page-content-wrapper {
  padding-bottom: 3.2rem;
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  height: 3.2rem;
}

.manager-circle {
  height: 1.45rem;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  max-width: none
}

.manager-box {
  display:flex;
  flex-direction:row;
  gap: 10px;
  align-items:center;
  justify-content: center;
  padding: 8px;
}

:where(.page-title) {
  --color: inherit;
  --background-color: white;
}

.page-title {
  display: flex;
  font-family: 'AlternateGoth', Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, sans-serif; /* TODO - define fonts somewhere else and use multiple styles to apply*/
  justify-content:center;
  font-size: 2.4rem;
  /* hack to get font centered do to non-standard font replacement*/
  padding-bottom: .3rem;
  margin-top: -.2rem;
  color: var(--color);
  background: var(--background-color);
}

.defense-small-icon {
  height: 1.45rem;
}

.reset-button {
  cursor:pointer;
  font-weight:600;
  font-size:.9rem;
  padding:4px 11px;
  align-self:center;
  margin-top:10px;
  background-color:#341687;
  border:none;
  color:white;
  border-radius:2px;
}

.rights-reserved {
  display:flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self:center;
  font-size: .85em;
  color:#acacac;
  letter-spacing: .01em;
}

/*
  TODO - everything above likely belongs in a common css of some sort
*/

.player-name {
  width:auto;
  display: flex;
  flex-direction: row-reverse;
  font-size: .9rem;
  float: right;
  font-weight: var(--manager-name-font-weight);
}

.player-name-section {
  width:150px;
  gap:5px;
  text-wrap:nowrap;
  display:flex;
  flex-direction:row;
  align-items:center;
  text-overflow:ellipsis;
}

.player-selection-wrapper {
  width:3.0rem;
  display:flex;
  justify-content:end;
}

.player-selection {
  font-size: .8rem;
  height: 25px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
}

.player-data-row {
  font-size: .85rem;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap:3px;
}

.player-info-wrapper {
  margin-left:1px;
  display:flex;
  flex-direction:row;
  gap:5px;
  align-items: center;
}

:where(.position-ranking-cell-backdrop) {
  --background-color: white;
  --border: none;
}

.position-ranking-cell-backdrop {
 height:18px;
 background: var(--background-color);
 display:flex;
 align-items:center;
 padding:4px 1px;
 border-radius:2px;
 width:58px;
 min-width:58px;
 justify-content: center;
 border: var(--border);
}

:where(.position-ranking-cell) {
  --background-color: #f3f3f3;
}

.position-ranking-cell {
  height:26px;
  background: var(--background-color);
  display:flex;
  align-items:center;
  padding:0px 1px;
  border-radius:2px;
  width:58px;
  min-width:58px;
  justify-content: center;
}

.position-ranking-cell-text {
  font-weight:600;
  font-size:.7rem;
  display:flex;
  align-items:center;
}

:where(.position-ranking-cell-color-square) {
  --background-color: #f3f3f3;
}

.position-ranking-cell-color-square {
  width:8px;
  height:8px;
  background: var(--background-color);
  margin-right:4px;
  border-radius:2px;
}

:where(.position-draft-code) {
  --background-color: #f3f3f3;
  --border: none;
  --margin-left: 96px;
  --margin-right: 9px;
}

.position-draft-code {
  width: 44px;
  min-width: 44px;
  background: var(--background-color);
  border-radius: 2px;
  font-size: .7rem;
  height: 26px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: var(--margin-left);
  margin-right: var(--margin-right);
  border: var(--border);
}

.keeper {
  font-size: .7rem;
  color: white;
  border: #1d5c93;
  background: #c027d4;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.adp-tracker-container {
  display:flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding-top: 8px;
  margin-bottom: 2.5rem;
}

.adp-tracker-page-content-wrapper {
  padding-bottom: 3.2rem;
}

.adp-tracker-mobile {
  display:none;
  flex-direction:row;
  align-content:start;
  flex-wrap:nowrap;
  width:1120px;
}

.adp-tracker-laptop {
  display: flex;
  align-self: center;
  flex-direction:column;
  align-items: center;
  gap: 25px;
}

.adp-tracker-mobile-header {
  display:none;
}

.adp-tracker-laptop-header {
  display:block;
}

.adp-tracker-title {
  margin-top:0rem;
  display:flex;
  flex-direction:column;.player-selection
  align-content:
  center;gap:8px;
}

.adp-tracker-manager-name-and-icon {
  display:flex;
  flex-direction:row;
  gap:.5rem;
  padding-left: 8px;
}

.adp-tracker-manager-name {
  display: flex;
  font-size: .9rem;
  align-self: center;
  font-weight:500;
}

.orig-column-header {
  display: flex;
  justify-content: center;
  align-items: center;
  width:44px;
  min-width:44px;
}

:where(.overall-column-header) {
  --width: 60px;
}

.overall-column-header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--width);
  min-width: var(--width);
}

:where(.week-column-header) {
  --width: 60px;
}

.week-column-header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--width);
  min-width: var(--width);
}

:where(.column-header-container) {
  --margin-right: 0px;
  --width: auto;
  --justify-content: end;
}

.column-header-container {
  display: flex;
  flex-direction: row;
  align-items:center;
  justify-content: var(--justify-content);
  gap: 3px;
  font-size:.85rem;
  font-weight:500;
  margin-right: var(--margin-right);
  width: var(--width);
}

:where(.line) {
  --border: 1px solid #e7e7e7;
}

.line {
  height: 0;
  border-bottom: var(--border);
  display:inline-block;
  margin: 1px 0px 3px 4px;
  width: 100%;
}

.manager-data-section {
  display:flex;
  flex-direction:column;
  gap:6px;
}

.manager-data-section-headers {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}

.troubletruck-header-bar {
  overflow: auto;
}

/***********************************************
  MOBILE OVERRIDES
***********************************************/
@media (max-width: 1450px) {
  :where(.position-draft-code) {
    --margin-left: 9px;
    --margin-right: 12px;
  }

  .adp-tracker-page-content-wrapper {
    padding-bottom: 3.2rem;
    width: 100vw;
    overflow-x: scroll;
  }

  .mobile-data-column-headers {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    font-size: .85rem;
    font-weight: 500;
    height: 1.51rem;
    padding-bottom: 5px;
    padding-left: 6px;
  }

  :where(.week-column-header) {
    --width: 56px;
  }

  .week-column-header {
    width: var(--width);
    min-width: var(--width);
  }

  :where(.overall-column-header) {
    --width: 56px;
  }

  .overall-column-header {
    width: var(--width);
    min-width: var(--width);
  }

  .added-space-for-fade {
    display:inline-block;
    width: 60px;
    min-width: 60px;
  }

  .line {
    margin: 0px 0px 0px 0px;
    width: 1122px;
  }

  .mobile-position-ranking-data-row {
    font-size: .85rem;
    font-weight: 500;
    display: flex;flex-direction: row;
    gap: 4px;
    padding-left:6px;
    padding-right:100px;
  }

  :where(.adp-tracker-title) {
    --background-color: white;
    --border: 1px solid white;
  }

  .adp-tracker-title {
    position:fixed;
    width:100vw;
    z-index: 100;
    margin-top: 2.53rem;
    top:0;
    height: 55px;
    border-bottom: var(--border);
    background: var(--background-color);
  }

  .adp-tracker-mobile-header {
    width: 100vw;
    position: fixed;
    left: 0;
    top: 0;
    height: 2.6rem;
    display:block;
    z-index: 999;
  }

  .adp-tracker-mobile {
    display:flex;
    margin-top: 130px;
    width: 100vw;
  }

  .adp-tracker-laptop{
    display: none;
  }

  .adp-tracker-laptop-header {
    display:none;
  }

  :where(.manager-box) {
    --background-color: white;
    --border: 1px solid black;
  }

  .manager-box {
    position:fixed;
    width:100vw;
    z-index: 100;
    margin-top: 6rem;
    padding: 4px 0px 12px 0px;
    top:0;
    border-bottom: var(--border);
    background: var(--background-color);
    gap: 6px;
  }

  .page-title {
    margin-top: 0px;
    font-size: 2.5em;
  }

  .position-ranking-cell {
    width: 54px;
    min-width: 54px;
  }

  .player-selection {
    font-size: .75rem;
  }

  .player-selection-wrapper {
    width:2.8rem;
  }

  :where(manager-data-section-headers) {
    --border: 1px solid #e7e7e7;
  }

  .manager-data-section-headers {
    border-bottom: var(--border);
    padding-right:6px;
    padding-bottom:6px;
  }

  :where(.mobile-manager-player-section) {
    --background-color: white;
    --width: 175px;
  }

  .mobile-manager-player-section {
    width: var(--width);
    background: var(--background-color);
    position:sticky;
    left:0;
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  .player-name-section {
    width:148px;
  }

  :where(.manager-player-column) {
    --background-color: white;
    --border: 1px solid #e7e7e7;
    --width: 175px;
  }

  .manager-player-column {
    z-index: 1;
    width: var(--width);
    background: var(--background-color);
    position: sticky;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
    border-right: var(--border);
    border-bottom: var(--border);
    padding-top: 7px;
    padding-bottom:7px;
  }

  .player-info-row {
    font-size: .85rem;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 3px;
    padding-right: 10px;
    height: 26px;
  }

  .position-ranking-cell-backdrop {
    width: 54px;
    min-width: 54px;
  }

  :where(.mobile-position-rank-code-container) {
    --border: 1px solid #e7e7e7;
  }

  .mobile-position-rank-code-container {
    display: flex;
    flex-direction: column;
    gap:25px;
    padding-top:7px;
    padding-bottom: 7px;
    border-bottom: var(--border);
    overflow-x: scroll;
    mask: linear-gradient(90deg, #0000, #000 0% 75%, #0000);
  }
}

/***********************************************
  DARK MODE OVERRIDES
***********************************************/
@media (prefers-color-scheme: dark) {
  :where(body) {
    --background-color: #110e1b;
    --text-color: #979797;
  }

  :where(.manager-box) {
    --background-color: #110e1b;
    --border: 1px solid #616161;
  }

  :where(.manager-player-column) {
    --background-color: #110e1b;
    --border: 1px solid #616161;
    --width: 265px;
  }

  :where(.mobile-manager-player-section) {
    --background-color: #110e1b;
    --width: 178px;
  }

  :where(.position-draft-code) {
    --background-color: #282240;
    --border: 1px solid #3b3448;
    --margin-left: 95px;
    --margin-right: 4px;
  }

  :where(.position-ranking-cell) {
    --background-color: #282240;
  }

  :where(.position-ranking-cell-backdrop) {
    --background-color: #000000;
    --border: 1px solid #3b3448;
  }

  :where(.line) {
    --border: 1px solid #616161;
  }

  :where(.position-ranking-cell-color-square) {
    --background-color: #282240;
  }

  :where(.column-header-container) {
    --margin-right: 1px;
    --width: 1215px;
    --justify-content: space-between;
  }

  :where(.page-title) {
    --background-color: #110e1b;
    --color: white;
  }

  :where(.adp-tracker-title) {
    --background-color: #110e1b;
    --border: 1px solid #110e1b;
  }

  :where(.overall-column-header) {
    --width: 61px;
  }

  :where(.week-column-header) {
    --width: 61px;
  }

  :where(.manager-data-section-headers) {
    --border: 1px solid #616161;
  }

  :where(.mobile-position-rank-code-container) {
    --border: 1px solid #616161;
  }

  .troubletruck-header-bar {
    border-bottom: 1px solid #616161;
  }

  .reset-button {
    border: 1px solid #616161;
  }

  /***********************************************
    DARK MOBILE OVERRIDES
  ***********************************************/
  @media (max-width: 1450px) {

    :where(.column-header-container) {
      --margin-right: 1px;
      --width: auto;
      --justify-content: space-between;
    }

    :where(.week-column-header) {
      --width: 58px;
    }

    :where(.overall-column-header) {
      --width: 58px;
    }

    :where(.position-draft-code) {
      --margin-left: 9px;
      --margin-right: 12px;
    }
  }
}