/* Shared Draft Punk extensions to Bootstrap and Dashkit components. */

:root:not([data-bs-theme="dark"]),
[data-bs-theme="light"] {
  --bs-secondary-color: #647288;
  --bs-secondary-color-rgb: 100, 114, 136;
}

:root {
  --dp-punk-blue: #355689;
  --dp-punk-blue-rgb: 53, 86, 137;
  --dp-light-blue: #42a5f5;
  --dp-light-blue-rgb: 66, 165, 245;
  --dp-punk-green: #437017;
  --dp-punk-green-rgb: 67, 112, 23;
  --dp-punk-blue-subtle: #e3f2fe;
  --dp-pro-gold-dark: #b29a53;
  --dp-pro-gold-dark-rgb: 178, 154, 83;
  --dp-pro-gold-super-light: #f0e0a8;
  --dp-pro-trim-gradient: linear-gradient(
    90deg,
    var(--dp-pro-gold-dark) 0%,
    var(--dp-pro-gold-super-light) 75%,
    var(--dp-pro-gold-dark) 100%
  );
  --dp-brand-navy-deep: #08111c;
  --dp-brand-navy-deep-rgb: 8, 17, 28;
  --dp-brand-navy-mid: #12375d;
  --dp-brand-navy-mid-rgb: 18, 55, 93;
  --dp-brand-gradient: linear-gradient(
    120deg,
    var(--dp-brand-navy-deep) 0,
    var(--dp-brand-navy-mid) 58%,
    var(--bs-primary) 145%
  );
  --dp-injury-out: #ff0000;
  --dp-injury-doubtful: #cc6600;
  --dp-injury-probable: #0066cc;
  --dp-injury-suspended: #4d0000;
}

/* Canonical typography for page headers across the application. */
.header-pretitle {
  font-size: .5rem;
  letter-spacing: .075rem;
}

.header-title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.05rem;
  line-height: 1.3;
}

.header-subtitle {
  font-size: .6875rem;
}

/* Keep dialog close controls inside the header gutter. */
.modal-header .btn-close,
.offcanvas-header .btn-close {
  margin-right: 0;
}

.btn-xs {
  --bs-btn-padding-y: .125rem;
  --bs-btn-padding-x: .375rem;
  --bs-btn-font-size: .75rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
  line-height: 1.5;
}

.table-xxs > :not(caption) > * > * {
  padding: .75rem;
}

.table-xxs {
  font-size: .8125rem;
}

.table-xxs thead th {
  font-size: .5rem;
}

.player-identity-badge {
  --bs-badge-border-radius: var(--bs-border-radius-sm);
  --bs-badge-font-size: .55rem;
  --bs-badge-font-weight: 700;
  --bs-badge-padding-x: .25rem;
  --bs-badge-padding-y: .15rem;
  text-transform: uppercase;
}

.player-injury-status-out {
  background-color: var(--dp-injury-out);
}

.player-injury-status-doubtful {
  background-color: var(--dp-injury-doubtful);
}

.player-injury-status-probable {
  background-color: var(--dp-injury-probable);
}

.player-injury-status-suspended {
  background-color: var(--dp-injury-suspended);
}

.player-draft-action-column {
  --dp-draft-action-column-padding-x: 0;
  --dp-draft-action-column-width: 12px;
  max-width: var(--dp-draft-action-column-width);
  min-width: var(--dp-draft-action-column-width);
  transition: max-width .18s cubic-bezier(.2, .8, .2, 1),
    min-width .18s cubic-bezier(.2, .8, .2, 1),
    width .18s cubic-bezier(.2, .8, .2, 1),
    padding .18s cubic-bezier(.2, .8, .2, 1);
  width: var(--dp-draft-action-column-width);
}

table.card-table tbody td.player-draft-action-column,
table.card-table thead th.player-draft-action-column {
  padding-left: var(--dp-draft-action-column-padding-x) !important;
  padding-right: var(--dp-draft-action-column-padding-x) !important;
}

.player-draft-action-column.is-visible {
  --dp-draft-action-column-padding-x: .75rem;
  --dp-draft-action-column-width: 4.25rem;
}

.player-draft-action-enter {
  animation: player-draft-action-enter .18s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes player-draft-action-enter {
  from {
    opacity: 0;
    transform: translateX(-.2rem) scale(.92);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@media (max-width: 767.98px) {
  .player-draft-action-column.is-visible {
    --dp-draft-action-column-width: 3.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .player-draft-action-enter {
    animation: none;
  }

  .player-draft-action-column {
    transition: none;
  }
}

.control-bar-sm {
  min-height: 40px !important;
}

.nav-pills-soft {
  --bs-nav-link-padding-x: .5rem;
  --bs-nav-link-padding-y: .25rem;
  --bs-nav-link-color: var(--bs-secondary-color);
  --bs-nav-link-hover-color: var(--bs-body-color);
  --bs-nav-pills-border-radius: var(--bs-border-radius-sm);
  --bs-nav-pills-link-active-color: var(--bs-body-color);
  --bs-nav-pills-link-active-bg: var(--bs-primary-bg-subtle);
  line-height: 1.25rem;
}

.btn-punk {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--dp-punk-blue);
  --bs-btn-border-color: var(--dp-punk-blue);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #2d4974;
  --bs-btn-hover-border-color: #2a456e;
  --bs-btn-focus-shadow-rgb: 83, 111, 155;
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: #2a456e;
  --bs-btn-active-border-color: #284167;
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--dp-punk-blue);
  --bs-btn-disabled-border-color: var(--dp-punk-blue);
}

.btn-punk-light {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--dp-light-blue);
  --bs-btn-border-color: var(--dp-light-blue);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--dp-punk-blue);
  --bs-btn-hover-border-color: var(--dp-punk-blue);
  --bs-btn-focus-shadow-rgb: 94, 179, 247;
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: #2d4974;
  --bs-btn-active-border-color: #2a456e;
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--dp-light-blue);
  --bs-btn-disabled-border-color: var(--dp-light-blue);
}

.btn-punk-green {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--dp-punk-green);
  --bs-btn-border-color: var(--dp-punk-green);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #395f14;
  --bs-btn-hover-border-color: #365a12;
  --bs-btn-focus-shadow-rgb: 95, 133, 58;
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: #365a12;
  --bs-btn-active-border-color: #325411;
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--dp-punk-green);
  --bs-btn-disabled-border-color: var(--dp-punk-green);
}

.bg-punk-subtle {
  background-color: var(--dp-punk-blue-subtle) !important;
  color: var(--dp-punk-blue) !important;
}

.bg-dp-brand-gradient {
  background-color: var(--bs-dark);
  background-image: var(--dp-brand-gradient);
}

.dp-dialog-header-field {
  background-color: var(--dp-punk-blue);
  background-image:
    linear-gradient(
      120deg,
      rgba(var(--dp-brand-navy-deep-rgb), .94) 0%,
      rgba(var(--dp-brand-navy-mid-rgb), .88) 58%,
      rgba(var(--dp-punk-blue-rgb), .82) 145%
    ),
    url("../img/covers/field.jpg");
  background-position: center;
  background-size: cover;
}

.profile-hero {
  --bs-black-rgb: 0, 0, 0;
  isolation: isolate;
}

.profile-hero-team-blur {
  background-color: var(--bs-dark);
  filter: blur(4.5rem) saturate(1.35) brightness(1.35);
}

.profile-hero-team-blur-primary {
  height: clamp(11rem, 24vw, 18rem);
  left: 12%;
  top: -9rem;
  transform: rotate(-8deg);
  width: clamp(17rem, 40vw, 30rem);
}

.profile-hero-team-blur-secondary {
  bottom: -8rem;
  height: clamp(10rem, 20vw, 15rem);
  right: -4rem;
  transform: rotate(12deg);
  width: clamp(15rem, 32vw, 24rem);
}

.profile-hero-copy {
  min-width: 0;
}

.profile-hero-title {
  font-size: clamp(1.5rem, 7.5vw, 2.625rem);
}

.profile-hero-metrics {
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}

.nav-tabs {
  --bs-nav-tabs-link-active-border-width: 2px;
}

.profile-hero .header-tabs {
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--bs-white);
}

.profile-hero .header {
  --bs-header-tabs-link-color: rgba(var(--bs-white-rgb), .6);
  --bs-header-tabs-link-hover-color: var(--bs-white);
}

.player-profile-layout {
  display: grid;
  grid-template-areas:
    "news"
    "main"
    "info";
  grid-template-columns: minmax(0, 1fr);
}

.player-profile-news {
  grid-area: news;
  min-width: 0;
}

.player-profile-main {
  grid-area: main;
  min-width: 0;
}

.player-profile-info {
  grid-area: info;
  min-width: 0;
}

@media (min-width: 1200px) {
  .player-profile-layout {
    column-gap: 1.5rem;
    grid-template-areas:
      "main news"
      "main info";
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
}

.dp-icon-pro-gradient {
  background-image: var(--dp-pro-trim-gradient);
  background-clip: text;
  color: transparent !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dp-icon-pro-gold {
  color: var(--dp-pro-gold-super-light);
  height: 1rem;
  width: 1rem;
}

.dp-icon-pro-gold svg {
  fill: currentColor;
  height: 100%;
  width: 100%;
}

.dp-border-pro {
  border-color: var(--dp-pro-gold-dark) !important;
}

.pro-feature-screenshot {
  display: block;
  height: auto;
  max-width: 32.1875rem;
  width: 100%;
}

.pro-feature-screenshot-compact {
  max-width: 26rem;
}

.dp-intelligence-heading {
  letter-spacing: .12em;
  line-height: 1.5;
}

.dp-dialog-player-avatar .avatar {
  --bs-avatar-size: 3.65rem;
  font-size: 1rem;
}

.draft-state-turn-symbol {
  background-color: var(--bs-primary-bg-subtle);
  border-color: rgba(var(--bs-primary-rgb), .25) !important;
  color: var(--bs-primary);
}

#draft-state-progress-bar[aria-valuenow="0"] {
  min-width: .5rem;
}

#draft-state-turn-banner.draft-state-turn-banner-paused .draft-state-turn-symbol {
  background-color: rgba(var(--bs-white-rgb), .08);
  border-color: rgba(var(--bs-white-rgb), .2) !important;
  color: var(--bs-white);
}

#draft-state-turn-banner:is(.draft-state-turn-banner-active, .draft-state-turn-banner-complete) .draft-state-turn-symbol {
  background-color: rgba(var(--bs-primary-rgb), .08);
  border-color: rgba(var(--bs-primary-rgb), .45) !important;
  color: var(--dp-light-blue);
}

@media (min-width: 768px) {
  #draft-state-turn-heading {
    font-size: 1.125rem;
    line-height: 1.2;
  }

  #draft-state-turn-detail {
    line-height: 1.35;
  }

  .draft-state-primary-action {
    font-size: .875rem;
    min-height: 3rem;
  }

  #draft-state-mock-timer {
    font-size: 1.75rem;
  }

  .draft-state-turn-meta {
    font-size: .6875rem;
  }
}

#draft-state-turn-banner:is(.draft-state-turn-banner-active, .draft-state-turn-banner-paused, .draft-state-turn-banner-complete) {
  --bs-card-bg: var(--dp-brand-navy-mid);
  --bs-card-border-color: var(--dp-brand-navy-mid);
  --bs-card-color: var(--bs-white);
}

#draft-state-turn-banner:is(.draft-state-turn-banner-active, .draft-state-turn-banner-paused, .draft-state-turn-banner-complete) #draft-state-turn-heading {
  color: var(--bs-white);
}

#draft-state-turn-banner:is(.draft-state-turn-banner-active, .draft-state-turn-banner-paused, .draft-state-turn-banner-complete) .text-body-secondary {
  color: var(--bs-gray-600) !important;
}

#draft-state-turn-banner:is(.draft-state-turn-banner-active, .draft-state-turn-banner-paused) .progress {
  background-color: rgba(var(--bs-white-rgb), .12);
}

/* Shared insight surface; recommendation cards also add interaction states. */
.draft-copilot-recommendation,
.draft-copilot-recommendation-surface {
  --draft-copilot-recommendation-rgb: var(--bs-secondary-rgb);
  background:
    linear-gradient(
      90deg,
      rgba(var(--draft-copilot-recommendation-rgb), .12) 0%,
      rgba(var(--draft-copilot-recommendation-rgb), .055) 58%,
      transparent 88%
    ),
    var(--bs-card-bg);
}
.draft-copilot-recommendation {
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.draft-copilot-recommendation-primary {
  --draft-copilot-recommendation-rgb: var(--bs-primary-rgb);
}
.draft-copilot-recommendation-success {
  --draft-copilot-recommendation-rgb: var(--bs-success-rgb);
}
.draft-copilot-recommendation-warning {
  --draft-copilot-recommendation-rgb: var(--bs-warning-rgb);
}
.draft-copilot-recommendation:hover,
.draft-copilot-recommendation:focus-within {
  background:
    linear-gradient(
      90deg,
      rgba(var(--draft-copilot-recommendation-rgb), .16) 0%,
      rgba(var(--draft-copilot-recommendation-rgb), .08) 64%,
      transparent 92%
    ),
    var(--bs-tertiary-bg);
  border-color: var(--bs-primary-border-subtle);
  box-shadow: var(--bs-box-shadow);
}

/* Tier awards in player tables. */
.tier-1 .fe-award {
  color: #ffd700;
}
.tier-2 .fe-award {
  color: #c0c0c0;
}
.tier-3 .fe-award {
  color: #cd7f32;
}