/*----------------------------------------------------------------------------*/
/*  Style rules for the The Villages Division 4 Softball 'lineup' app/.       */
/*                Copyright (c) 2018 by David C. Morrill                      */
/*----------------------------------------------------------------------------*/

/* CSS variable definitions */
@media (orientation: landscape) {

  #lineup {
    right: 50%
  }

  #roster {
    transform: translateX(0%);
  }

  #showroster {
    display: none;
  }
}

@media (orientation: portrait) {

  #roster {
    transform: translate(100%);
  }
}

:root {
  /*-- Color definitions -----------------------------------------------------*/
  
  --header-bgcolor:         #365E38;
  --header-color:           #F0F0F0;
  --content-bgcolor:        #A0A0A0;
  --content-bcolor:         #E0E0E0;
  --tab-color:              #E0E0E0;
  --tab-bgcolor:            #365E38;
  --active-tab-bgcolor:     #BE7F0D;
  --slider-bgcolor:         #E0E0E0;
  --buttons-bgcolor:        #365E38; /* Buttons area background color */
  --button-bgcolor:         #BE7F0D; /* Button background color */
  --button-hbgcolor:        #8EA48E; /* Button hover background color */
  --button-color:           #F0F0F0; /* Button text color */
  --button-bcolor:          #F0F0F0; /* Button border color */
  --stats-color:            #F0F0F0; /* Stats entry text color */
  --stats-bcolor:           #E0E0E0; /* Stats entry border color */
  --helpsection-bgcolor:    #365E38; /* Help section header background color*/
  --helpsection-color:      #CCE6D7; /* Help section header text color */
  --dialog-bgcolor:         #BE7F0D; /* Dialog background color */
  --dialog-ebgcolor:        #D00000; /* Dialog error background color */
  --dialog-bcolor:          #FFFFFF; /* Dialog border color */
  --dialog-tcolor:          #E0E0E0; /* Dialog text color */
  --lineup-bgcolor:         #365E38; /* Lineup/roster area background color */
  --nd-name-bgcolor:        #D4DFD4; /* Dialog name list item background color */
  --nd-name-tcolor:         #000000; /* Dialog name list item text color */
  --lineup-bcolor:          #000000; /* Lineup player border color */
  --lineup-ccolor:          #96B696; /* Lineup player checked item background color */
  --lineup-uccolor:         #D69A01; /* Lineup player checked but unknown item background color */
  --lineup-ctcolor:         #000000; /* Lineup player checked item text color */
  --lineup-pending-bgcolor: #96B696; /* Lineup player waiting for runner assignment background color */
  --lineup-pending-tcolor:  #000000; /* Lineup player waiting for runner assignment text color */
  --lineup-chosen-tcolor:   #B60000; /* Lineup player chosen as runner text color */
  --lineup-choice-tcolor:   #44769F; /* Lineup player avalable to be chosen as runner text color */
  --lineup-broken-bgcolor:  #FFD7D7; /* Lineup player with broken runner relation background color */

  /*-- Size definitions ------------------------------------------------------*/

  --header-height:  3rem;
  --tabs-height:    3rem;
  --buttons-height: 3.6rem;
}

/*-- Document wide style rules -----------------------------------------------*/

body {
  font-family: arial;
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  user-select: none;
}

body, div, span, center {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.dialog {
  position: absolute;
  z-index: 20;
  top: 40vh;
  left: 15vw;
  width: 70vw;
  padding: 12px;
  font-size: 1.5rem;
  text-align: center;
  background-color: var(--dialog-bgcolor);
  color: var(--dialog-tcolor);
  border: 4px solid var(--dialog-bcolor);
  border-radius: 9px;
  transform: translateX(85vw);
  transition: transform 1s;
}

.dialog.error {
  background-color: var(--dialog-ebgcolor);
}

.dialog.open {
  transform: translateX(0%);
}

#shirtdialog {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0,0,0,0.8);
  transform: translateX(100%);
  transition: transform 1s;
}

#shirtdialog.open {
  transform: translateX(0%);
}

/*-- Header area related style rules -----------------------------------------*/

#header {
  display: flex;
  bottom: unset;
  height: var(--header-height);
  color: var(--header-color);
  background-color: var(--header-bgcolor);
}

#team {
  flex-grow: 1;
  padding-top: 14px;
  text-align: center;
  font-size: 1.25rem;
}

/*-- Content area related styles rules ---------------------------------------*/

#content {
  top: var(--header-height);
  bottom: var(--tabs-height);
  background-color: var(--content-bgcolor);
}

.slider {
  background-color: var(--slider-bgcolor);
  padding: 12px 12px 12px 12px;
  border-left: 1px solid #808080;
  border-right: 1px solid #808080;
  border-top: 2px solid #000000;
  border-bottom: 2px solid #FFFFFF;
  transition: transform 1s;
}

.left.slider {
  transform: translateX(100%);
}

.right.slider {
  transform: translateX(-100%);
}

.open.slider.container {
  transform: translate(0%,0%);
}

/*-- Footer area related style rules -----------------------------------------*/

#tabs {
  top: unset;
  height: var(--tabs-height);
  display: flex;
}

.tab {
  flex-grow: 1;
  height: 100%;
  margin-right: -2px;
  padding-top: 8px;
  color: var(--tab-color);
  background-color: var(--tab-bgcolor);
  text-align: center;
  transition: background-color 1s;
}

.tab:last-child {
  margin-left: 4px;
}

.active.tab {
  background-color: var(--active-tab-bgcolor);
}

.tabicon {
  font-size: 2rem;
}

.tab.disabled .tabicon {
  opacity: 0.15;
}

/*-- Lineup panel related style rules ----------------------------------------*/

#roster {
  left: 50%;
  background-color: var(--button-bcolor);
  transition: transform .67s;
}

#roster.open {
  transform: translateX(0%);
}

#luplayers, #roplayers {
  bottom: var(--buttons-height);
  background-color: var(--lineup-bgcolor);
  border-bottom: 1px solid var(--button-bcolor);
  overflow-y: scroll;
}

#roplayers {
  background-color: #303030;
}

#roplayers {
  left: 2px;
}

#lubuttons {
  top: unset;
  height: var(--buttons-height);
  display: flex;
}

.button {
  background-color: var(--button-bgcolor);
  color: var(--button-color);
  text-align: center;
  font-size: 1.3rem;
  padding: 10px 15px 8px 15px;
  margin: 7px 10px;
  border-radius: 7px;
  transition: opacity 1s;
}

.button:hover {
  background-color: var(--button-hbgcolor);
}

.button.disabled, .button.disabled:hover {
  opacity: 0.4;
  background-color: var(--button-bgcolor);
}

.right {
  border-left: 2px solid var(--button-bcolor);
}

.half {
  width: 50%;
  flex-grow: 1;
}

.buttons {
  display: flex;
  top: unset;
  justify-content: center;
  height: var(--buttons-height);
  background-color: var(--buttons-bgcolor);
}

.lineupplayer {
  display: flex;
  margin: 3px 3px 0 3px;
  background-color: var(--nd-name-bgcolor);
  color: var(--nd-name-tcolor);
  font-size: 1.1rem;
}

.lineupplayer .lineupchoice {
  color: var(--lineup-choice-tcolor);
  font-style: italic;
  font-weight: bold;
}

.lineupplayer .lineupchosen {
  color: var(--lineup-chosen-tcolor);
  font-style: italic;
  font-weight: bold;
}

.lineupplayer .playerrunner {
  font-weight: bold;
}

.lineupplayer .lineupchosen.lineupbroken, 
.lineupplayer .lineupbroken {
  background-color: var(--lineup-broken-bgcolor);
}

.lineupplayer .lineuppending {
  color: var(--lineup-pending-tcolor);
  background-color: var(--lineup-pending-bgcolor);
}

.lineupname {
  flex-grow: 1;
  padding: 10px 0 7px 5px;
  white-space: nowrap;
  overflow: hidden;
}

.lineupitem, .lineupshirt {
  flex-grow: 0;
  padding: 4px 0 0 0;
  min-width: 2.8rem;
  text-align: center;
  color: #B1B9B1;
  font-size: 1.5rem;
  border-left: 1px solid var(--lineup-bcolor);
}

div.lineupshirt {
  color: #365E38;
}

.lineupitem:hover, .lineupshirt:hover {
  background-color: #A5C4A5;
  color: #365E38;
}

#roplayers .lineupitem {
  display: none;
}

.lineupplayer .lineupchecked {
  color: var(--lineup-ctcolor);
  background-color: var(--lineup-ccolor);
}

.lineupplayer .lineupchecked.unknown {
  background-color: var(--lineup-uccolor);
}

.lineuprow {
  display: flex;
  color: var(--stats-color);
  font-size: 1.2rem;
  border-bottom: 1px solid var(--stats-bcolor);
}

.index {
  font-size: 1.2rem;
  margin: 10px 6px 5px 0;
  width: 1.6rem;
  text-align: right;
}

#roplayers .index {
  display: none;
}

.runnerindex {
  display: inline-block;
  font-size: 0.9rem;
  margin: 0 0 0 5px;
  padding: 2px 8px 1px 6px;
  background-color: #B60000;
  color: #E0E0E0;
  border-radius: 4px;
}

/*-- Shirt number dialog related style rules ---------------------------------*/

.shirttitle {
  background-color: #7C9A7A;
  color: #E6E6E6;
  padding: 8px;
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 10px;
  border-radius: 5px;
}

.innershirt {
  margin: 3% auto;
  background-color: #1A5813;
  padding: 8px;
  border-radius: 9px;
  width: 20rem;
  border: 2px solid #BE7F0D;
}

.digits {
  display: flex;
  justify-content: center;
}

.digit1, .digit2 {

}

.digit {
  padding: 7px 20px;
  background-color: #D3D3D3;
  margin: 4px;
  font-size: 1.2rem;
  border-radius: 5px;
}

.digit.active, .digit.active:hover {
  background-color: #2B97E3;
}

.digit:hover {
  background-color: #979797;
}

.shirtbuttons {
  display: flex;
}

.shirtbuttons .button {
  width: 50%;
  margin: 6px 4px 0 4px;
}

#shirtnumber {
  font-size: 1.2rem;
  padding-left: 8px;
  color: #1A5813;
}

/*-- Help panel related style rules ------------------------------------------*/

#myhelp p {
  color: #000000;
  margin-top: 0;
  margin-bottom: 19px;
  margin-left: 15px;
}

#myhelp img {
  display: block;
  margin: -9px auto 10px auto;
}

#myhelp li {
  list-style: disc;
  margin-left: 6px;
  color: #303030;
}

#myhelp h2 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.15em;
  letter-spacing: 2px;
  padding: 4px 16px;
  margin: -7px 0 10px 0;
  background-color: var(--helpsection-bgcolor);
  color: var(--helpsection-color);
  border-radius: 5px;
  cursor: pointer;
}

#myhelp h2:first-child {
  margin-top: 0;
}

#myhelp h3 {
  font-size: 0.9em;
  padding: 4px 16px;
  margin: -7px 0 10px 15px;
  border-radius: 5px;
  background-color: var(--helpsection-bgcolor);
  color: var(--helpsection-color);
  cursor: pointer;
}

#myhelp h4 {
  font-size: 0.8em;
  text-align: center;
  background-color: #D69A01;
  padding: 6px 6px 1px 6px;
  margin: 15px -15px 0 -15px;
  border-radius: 0px;
}

.helpsection.auto {
  display: none;
  margin: 0;
  padding: 0;
}

.helpsection pre {
    margin-bottom: 15px;
}

/*-- Icon definitions --------------------------------------------------------*/

@font-face {
  font-family: 'icons';
  src: url('../lib/tvsis.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icons';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

 /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
}

.icon-lineup:before {
  content: "I";
}

.icon-help:before {
  content: "H";
}

.icon-runner:before {
  content: "T";
}

.icon-pitcher:before {
  content: "P";
}

.icon-left:before {
  content: "O";
}

.icon-left {
  padding-right: 20px;
}

.icon-right:before {
  content: "Q";
}

.icon-right {
  padding-left: 20px;
}

.icon-left, .icon-right {
  opacity: 0.2;
  transition: opacity 1s;
}

.enabled.icon-left, .enabled.icon-right {
  opacity: 1;
}

/* Hacks */

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}