/* ===============================
   FONTS
   =============================== */
@font-face {
    font-family: 'Alexis';
    font-style: normal;
    font-weight: normal;
    src: local('Alexis'), url('../fonts/alex.woff') format('woff');
    src: url("../fonts/alexisv3.ttf") format('truetype');
}

/* ===============================
   GLOBAL STYLES
   =============================== */
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    color: rgb(178, 57, 27);
    background-color: rgb(2, 29, 92);
    font-family: -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* ===============================
   TABLE STYLING
   =============================== */
#prematch_table, #postmatch_table, #auton_table, #endgame_table, #teleop_table {
    font-family: -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
    text-align: center;
    color: yellow;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    border-style: groove;
    border-width: 2px;
    border-color: rgb(255, 0, 251);
}

input[type="button"]:active {
  transform: scale(0.9);
  transition: transform 0.1s;
}

input[type="radio"]:active {
  transform: scale(0.9);
  transition: transform 0.1s;
}

input[type="counter"]:active {
  transform: scale(0.9);
  transition: transform 0.1s;
}

.success-flash {
  animation: successFlash 0.4s ease;
}

@keyframes successFlash {
  15%   { background-color: #00ff88; transform: scale(1); }
  30%  { background-color: #00ff88; transform: scale(1.02); }
  45%  { background-color: #00ff88; transform: scale(1.04); }
  60%  { background-color: #00ff88; transform: scale(1.06); }
  75%  { background-color: #00ff88; transform: scale(1.08); }
  90%  { background-color: #00ff88; transform: scale(1.1); }
  100% { background-color: transparent; transform: scale(1); }
}

/* ===============================
   BUTTONS
   =============================== */
.button, .clearForm, .submitForm, #displayButton, #copyButton, .undoButton, .flipButton,
#nextButton1,#nextButton2,#nextButton3,#nextButton4,#nextButton5,#nextButton6,#nextButton7,#nextButton8,#nextButton9,#nextButton10 {
    font-family: Alexis;
    padding: 10px;
    background-color: black;
    color: rgb(0, 255, 30);
    display: inline-block;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.05s ease, box-shadow 0.2s ease, text-shadow 0.2s ease;
}

.button,#prevButton1,#prevButton2,#prevButton3,#prevButton4,#prevButton5,#prevButton6,#prevButton7,#prevButton8,#prevButton9{
    font-family: Alexis;
    padding: 10px;
    background-color: black;
    color: rgb(255, 0, 251);
    display: inline-block;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.05s ease, box-shadow 0.2s ease, text-shadow 0.2s ease;
}

/* Active press scale */
.button:active, .clearForm:active, .submitForm:active, #displayButton:active, #copyButton:active,
.undoButton:active, .flipButton:active, #prevButton1:active,#prevButton2:active,#prevButton3:active,#prevButton4:active,
#prevButton5:active,#prevButton6:active,#prevButton7:active,#prevButton8:active,#prevButton9:active,
#nextButton1:active,#nextButton2:active,#nextButton3:active,#nextButton4:active,#nextButton5:active,
#nextButton6:active,#nextButton7:active,#nextButton8:active,#nextButton9:active,#nextButton10:active {
    transform: scale(0.95);
}

/* Hover glow */
.button:hover, .clearForm:hover, .submitForm:hover, #displayButton:hover, #copyButton:hover,
.undoButton:hover, .flipButton:hover, #prevButton1:hover,#prevButton2:hover,#prevButton3:hover,#prevButton4:hover,
#prevButton5:hover,#prevButton6:hover,#prevButton7:hover,#prevButton8:hover,#prevButton9:hover,
#nextButton1:hover,#nextButton2:hover,#nextButton3:hover,#nextButton4:hover,#nextButton5:hover,
#nextButton6:hover,#nextButton7:hover,#nextButton8:hover,#nextButton9:hover,#nextButton10:hover {
    text-shadow: 0 0 8px currentColor, 0 0 12px currentColor;
    box-shadow: 0 6px 0 #333, 0 0 10px currentColor;
}

/* ===============================
   HEADERS
   =============================== */
h1, h2 {
    font-family: Alexis;
    text-align: center;
}

h1 {
    border-style: groove;
    border-color: rgb(255, 0, 251);
    border-width: 2px;
    font-size: 40px;
    padding: 10px;
    font-weight: 350;
}

h2 {
    font-size: 30px;
    font-weight: 300;
    font-style: italic;
}

/* ===============================
   MAIN PANELS
   =============================== */
.main-panel {
    display: none;
    height: 100%;
    min-height: 100%;
    width: 100vw;
    position: absolute;
    left: 0;
    top: 0;
    color: yellow;
    background-color: black;
    text-align: justify;
}

/* ===============================
   INDIVIDUAL PANELS
   =============================== */
#prematch { display: table; }
#auton, #teleop, #endgame, #postmatch { background-color: #000030; color: yellow; border-color: rgb(255, 0, 251); }

/* ===============================
   QR CODE
   =============================== */
#qr-code, #qr-table, #data { text-align: center; color: black; background-color: white; }

/* ===============================
   TABLE CELLS AND INPUTS
   =============================== */
table { border: 1px solid black; width: 100%; }
td { padding: 10px 4px; text-align: center; }
input { font-size: 16px; font-family: roboto; color: black; background-color: white; }

/* ===============================
   RADIO BUTTON CENTERING
   =============================== */
table td input[type="radio"] { display: inline-block; margin: 0 auto; }
table td label { display: inline-block; margin: 0 5px; }
table td.radio-group { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }

/* ===============================
   MISC
   =============================== */
.title { width: 50%; text-align: right; }
.field { width: 50%; text-align: left; }
.match-label { text-align: center; }
.half-button-container { display: flex; }
.half-button-l, .half-button-r { width: 48%; margin: 1vw; height: 100%; font-family: roboto; }
.required-missing:focus { outline: 3px solid orange !important; }

#main-panel-holder > * {
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.page-enter {
  transform: translateX(100%);
  opacity: 0;
}

.page-active {
  transform: translateX(0);
  opacity: 1;
}