/*
Copyright 2019 LiveSite authors

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

html {
  position: relative;
  min-height: 100%;
  overflow-y: scroll;
}

/* TODO: Remove once migrated to Bootstrap 5 */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

body {
  margin-bottom: 64px;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 32px;
}

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.no-decoration {
  text-decoration: none !important;
  color: inherit !important;
}

/* Workaround bootstrap-material-design color issue */
.switch > label {
  color: inherit !important;
}

/*******************************************************************************
 *
 *  Standard standings
 *
 */

.standings-section {
  position: relative;
}

.standings-section.sticky-heading {
  position: sticky;
  top: 3.5rem; /* the (computed) height of .navbar */
  z-index: 10000;
  background: #fafafa; /* The same color as bootstrap's body background. */
}

.standard-standings {
  line-height: 1.3;
  overflow-anchor: none;
}

.standard-standings .team-row {
  position: relative;
  display: flex;
  border-bottom: 1px solid #ddd;
  transition:
    background-color 1s linear,
    box-shadow 0.5s linear;
}

.standings-section:last-child .team-row:last-child {
  border-bottom: 1px solid #ddd;
}

/* Hover highlight using inset box-shadow so it layers on top of
   other background colors (e.g. .new-solved, .sticky) */
.standard-standings:not(.reveal-mode) .standings-teams .team-row:hover {
  box-shadow: inset 0 0 0 9999px rgba(128, 128, 128, 0.15);
}

.standard-standings .team-row.legend {
  font-weight: bold;
  border-bottom: 1px solid #888;
}

.standard-standings .team-row.footer {
  font-size: 0.8rem;
  border-top: 1px solid #888;
}

.standard-standings .team-row.sticky {
  background-color: #bdbdbd;
}

.standard-standings .team-row.new-solved {
  background-color: #ffd600;
}

.standard-standings .team-row .team-left {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  display: flex;
}

.standard-standings .team-row .team-right {
  flex: 1 0 auto;
  width: 0;
  min-width: 0;
  display: flex;
}

.standard-standings .team-row .team-col {
  display: flex;
  align-items: center;
  margin: 4px 2px;
  position: relative;
}

.standard-standings .team-row .team-mark {
  flex: 0 0 auto;
  width: 20px;
  padding: 6px 2px 4px;
  justify-content: center;
  text-align: center;
  user-select: none;
}

.standard-standings .team-row .team-mark .fa-thumbtack {
  color: #bdbdbd;
  cursor: pointer;
}

.standard-standings .team-row .team-mark .fa-thumbtack.pinned {
  color: #f44336;
}

.standard-standings .team-row .team-rank {
  flex: 0 0 auto;
  width: 32px;
  justify-content: center;
  text-align: center;
}

.standard-standings .team-row .team-score {
  flex: 0 0 auto;
  width: 56px;
  justify-content: center;
  text-align: center;
}

.standard-standings .team-row .team-logo {
  flex: 0 0 auto;
  /* Match the row height to make a square logo area.
     2.3rem = two lines of text: 1.3rem (line-height) + 1.3*0.8rem (<small>)
     9px = 4px top margin + 4px bottom margin (.team-col) + 1px border-bottom (.team-row) */
  width: calc(2.3rem + 9px);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 2px;
  box-sizing: border-box;
  overflow: hidden;
}

.standard-standings .team-row .team-logo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.standard-standings .team-row .team-name {
  flex: 0 0 auto;
  width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.standard-standings .team-row .team-problems {
  flex: 1 1 auto;
  width: 0;
  display: flex;
}

.standard-standings .team-row .team-problems .team-problem {
  flex: 1 0 auto;
  width: 0;
  justify-content: center;
  text-align: center;
}

.standard-standings .team-row .team-problems .team-problem .team-problem-flag {
  position: absolute;
  display: inline-block;
}

.standard-standings .team-name > a {
  overflow: hidden;
  text-overflow: ellipsis;
}

.standard-standings .team-name .team-generic-col-content {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.standard-standings .team-name .university-container {
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.standard-standings .team-name .university-container .university-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.standard-standings .team-name .university-container .university-rank {
  font-size: 80%;
  flex-grow: 0;
  margin-left: 0.3em;
}

@media (min-width: 1400px) {
  .standard-standings .team-row .team-name {
    width: 380px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .standard-standings {
    font-size: 0.8rem;
  }
  .standard-standings .team-row .team-mark {
    width: 1rem;
  }
  .standard-standings .team-row .team-rank {
    width: 1.4rem;
  }
  .standard-standings .team-row .team-logo {
    width: 30px;
  }
  .standard-standings .team-row .team-score {
    width: 40px;
  }
  .standard-standings .team-row .team-name {
    width: 160px;
  }
}

@media (max-width: 767px) {
  .standard-standings {
    font-size: 0.8rem;
  }
  .standard-standings .team-row .team-logo {
    display: none;
  }
  .standard-standings .team-row .team-col {
    margin: 4px 1px;
  }
  .standard-standings .team-row .team-mark {
    width: 1rem;
  }
  .standard-standings .team-row .team-rank {
    width: 1.4rem;
  }
  .standard-standings .team-row .team-score {
    width: 1.4rem;
  }
  .standard-standings .team-row .team-name {
    flex: 1 1 auto;
  }
  .standard-standings .team-row .team-problems {
    flex: 0 0 auto;
    width: 180px;
  }
  .standard-standings .team-row .team-problem .team-colored-col-fg {
    display: none;
  }
  .standard-standings .team-row.footer {
    display: none;
  }
}

@media (max-width: 420px) {
  .standard-standings .team-row .team-problems {
    width: 120px;
  }
}

.events .event-animation-enter {
  opacity: 0;
}

.events .card {
  margin-bottom: 1px;
  font-size: inherit;
  background-color: rgba(245, 245, 245, 0.9);
  flex: 0 0 auto;
  transition: background-color 1s linear;
}

@media (max-width: 767px) {
  .events {
    display: none !important;
  }
}

@keyframes event-slidein {
  from {
    transform: translate(360px, 0);
  }
  to {
    transform: translate(0, 0);
  }
}

.events .card {
  animation: event-slidein 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.events .card .card-body {
  padding: 2px;
}

.events * {
  user-select: none;
}

.events .event-animation-enter.event-animation-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.events .event-animation-leave {
  opacity: 1;
}

.events .event-animation-leave.event-animation-leave-active {
  opacity: 0;
  transition: opacity 300ms ease-in;
}

.events .bg-pending {
  animation: none;
}

/*******************************************************************************
 *
 *  Standard standings (reveal)
 *
 */

.standard-standings .reveal-row {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1000000;
  pointer-events: none;
}

.standard-standings .reveal-row.animate-table-active {
  transition: transform 0.5s ease !important;
}

.standard-standings .reveal-row .team-row {
  opacity: 0;
}

.standard-standings .reveal-row .reveal-marker {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 0 0 5px red;
}

/*******************************************************************************
 *
 *  Standings common
 *
 */

.animate-table-active {
  transition: transform 3s ease !important;
}

@keyframes pending-blink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.bg-solved {
  background-color: #64dd17;
}

.bg-solved-first {
  background-color: #1daa1d;
}

.bg-pending {
  background-color: #ffd600;
  animation: pending-blink 1s ease 0s infinite alternate-reverse none running;
}

.bg-rejected {
  background-color: #ff5252;
}

.bg-unattempted {
  background-color: inherit;
}

.team-colored-col-fg {
  position: relative;
  color: #000 !important;
}

.team-colored-col-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/*******************************************************************************
 *
 *  Team info
 *
 */

.team-heading {
  display: flex;
  align-items: center;
}

.team-heading-logo {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-right: 12px;
}

.team-heading-text {
  min-width: 0;
}

.card-body .team-heading-logo {
  width: 40px;
  height: 40px;
  margin-right: 8px;
}

.teaminfo h1.my-3 {
  overflow-wrap: anywhere;
}

.teaminfo .team-thumbnail {
  width: 75%;
  height: auto;
  margin: auto;
}

.teaminfo .team-photo {
  width: 100%;
  height: auto;
  margin-bottom: 24px;
}

.teaminfo .profile {
  overflow: hidden;
  margin-top: 12px;
  margin-bottom: 12px;
}

.teaminfo .profile-icon {
  width: 80px;
  height: 80px;
  float: left;
}

.teaminfo .profile-data {
  margin-left: 100px;
}

.teaminfo .profile-data > p {
  margin-bottom: 4px;
}

.teaminfo .profile-name {
  font-size: 18px;
  font-weight: bold;
  overflow: hidden;
  vertical-align: bottom;
}

.team-highlight > .card-body {
  animation: highlightFade 3s ease-out;
}

@keyframes highlightFade {
  0% {
    background-color: #ffd600;
  }
  100% {
    background-color: transparent;
  }
}

@media (max-width: 1199px) {
  .teaminfo .team-thumbnail {
    width: 80%;
  }
}

@media (max-width: 991px) {
  .teaminfo .team-thumbnail {
    width: 100%;
  }
}