:root {

/* colors */

    --color-bg: #005500;
    --color-bg2: #007700;
    --color-green: #008800;
    --color-darker-bg: #002200;
    --color-text: #efe;

    --color-spinner: #005500;

    --color-bg-top-nav: #222;
    --color-top-nav-border: #eeb211;
    --color-top-nav-text: #fff;
    --color-top-nav-button: #eeb211;

    --color-nav-btn: #222;
    --color-nav-btn-text: #fff;
    --color-nav-btn-border: #a77e10;

    --color-circle: #000;
    --color-circle-text: #fff;
    --color-circle-border: #fff;

    --color-primary: #eeb211; /* used for nav-button highlight */
    --color-primary-opposite: #000;

    --color-pullup-backdrop: rgba(0,0,0,0.3);
    --color-pullup-shadow: 0 -4px 24px rgba(0,0,0,0.12);
    --color-pullup-cancel: #888;

    --color-bg-table: #fff;
    --color-bg-table2: #f0f0f0;
    --color-lifted-bg-table: #eee;
    --color-table: #002200;
    --color-table-header: #fff;

    --color-home-win: #00f;
    --color-draw: #999;
    --color-away-win: #f00;

    --color-border-analysis-table: #888;

    --color-button-text: #222;
    
    --color-button-text: #222;
    --color-button-bg: #eeb211;
    --color-button-border: #a77e10;
    --color-button-text-disabled: #22222266;
    --color-button-bg-disabled: #eeb21166;

/* font sizes */

    --font-size-app-name: 1.2em;
    --font-size-nav-btn: 1.0em;
    --font-size-competition-header: 1.5em;

}

/* to make sure it always looks like a mobile screen */

body {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    width: 100vw;
    height:100vh;
    overflow: hidden;
    max-width: 450px;
    max-height: 1200px;
    margin: auto;
    background: linear-gradient(-45deg, var(--color-bg), var(--color-bg2));
    color: var(--color-text);
}

/* global spinner */

#global-spinner .spinner {
  border: 8px solid #eee;
  border-top: 8px solid var(--color-spinner);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  margin: auto;
}
@keyframes spin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}

/* loading spinner */

#loading-spinner .spinner {
  border: 8px solid #eee;
  border-top: 8px solid var(--color-spinner);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  margin: auto;
}
@keyframes spin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}

/* main pages display and sliding */

.page-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.page {
    position: absolute;
    width: 100%;
    top: 60px;
    left: 0;
    bottom: 62px;
    transition: transform 0.4s cubic-bezier(.77,0,.18,1), opacity 0.4s;
    opacity: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0; 
}

.page.active {
    opacity: 1;
    z-index: 2;
}

.page.slide-in-right {
    transform: translateX(100%);
    animation: slideInRight 0.4s forwards;
}
.page.slide-in-left {
    transform: translateX(-100%);
    animation: slideInLeft 0.4s forwards;
}
.page.slide-out-left {
    transform: translateX(0);
    animation: slideOutLeft 0.4s forwards;
}
.page.slide-out-right {
    transform: translateX(0);
    animation: slideOutRight 0.4s forwards;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-100%); opacity: 0; }
}
@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* top navigation styles */

.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0;
    background: var(--color-bg-top-nav);
    border-bottom: 1px solid var(--color-top-nav-border);
    color: var(--color-top-nav-text);
}

.app-name {
    font-size: var(--font-size-app-name);
}

.nav-section {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-burger,
.nav-plus {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    justify-content: center;
    flex: none;
}

.nav-burger span {
    background: var(--color-top-nav-button);
}

.nav-plus button {
    color: var(--color-top-nav-button);
    background: none;
    border-color: var(--color-top-nav-button);
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    width: 32px;
    height: 32px;
    font-size: 24px;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.nav-title {
    flex: 1;
    justify-content: center;
}

/* navigation buttons at the bottom */

.nav-btns {
    position: absolute;
    bottom: 0;
    height: 58px;
    width: 100%;
    display: flex;
    border-top: 1px solid var(--color-nav-btn-border);
}

.nav-btns button {
    flex: 1 1 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: var(--color-nav-btn);
    color: var(--color-nav-btn-text);
    border: none;
    border-right: 1px solid var(--color-nav-btn-border); 
    font-size: var(--font-size-nav-btn);
}

.nav-btns button:last-child {
    border-right: none; /* remove border from last button */
}

.nav-btns button.active {
    background: var(--color-primary);
    color: var(--color-primary-opposite);
    font-weight: 600;
    box-shadow: 0 -2px 8px 0 rgba(25, 118, 210, 0.08);
}

/* pull up menu styles */

.pull-up-menu {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    z-index: 1000;
}

.pull-up-menu.active,
.pull-up-menu.unhide {
    display: block;
}

.pull-up-backdrop {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    background: var(--color-pullup-backdrop, rgba(0,0,0,0.3));
    z-index: 1;
}

.pull-up-content {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: var(--color-bg-top-nav, #fff);
    border-radius: 18px 18px 0 0;
    box-shadow: var(--color-pullup-shadow); /* Optional: add a variable if you want */
    z-index: 2;
    min-height: 180px;
    max-height: 70vh;
    width: 100%;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(.77,0,.18,1);
    display: flex;
    flex-direction: column;
}

/* Slide up when active */
.pull-up-menu.active .pull-up-content {
    transform: translateY(0);
    transition: transform 0.35s cubic-bezier(.77,0,.18,1);
}

.pull-up-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em 1.5em 0.5em 1.5em;
    border-bottom: 1px solid var(--color-top-nav-border, #eee);
}

.pull-up-title {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--color-top-nav-text, #222);
}

.pull-up-cancel {
    background: none;
    border: none;
    color: var(--color-pullup-cancel, #720ea4);
    font-size: 1em;
    cursor: pointer;
    padding: 0.5em 1em;
}

.pull-up-options {
    overflow-y: auto;
    max-height: 40vh;
    padding: 0.5em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.pull-up-option {
    padding: 1em 1.5em;
    border: none;
    text-align: left;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 8px;
    color: var(--color-text, #222);
    background: var(--color-bg-top-nav, #fff);
}

.pull-up-option:hover {
    background: var(--color-nav-btn-border, #ececec);
}

/* this is for the pop-up page*/

.popup-page {
    display: none;
    position: absolute;
    z-index: 2000;
    left: 0; right: 0; top: 0; bottom: 0;
}

.popup-page.active {
    display: block;
}

.popup-backdrop {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1;
}

.popup-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-bg-top-nav, #fff);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    width:100vw;
    height: 100vw;
    z-index: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em 1.5em 0.5em 1.5em;
    border-bottom: 1px solid var(--color-top-nav-border, #eee);
    background: var(--color-bg-top-nav, #fff);
}

.popup-title {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--color-top-nav-text, #222);
}

.popup-close {
    background: none;
    border: none;
    color: var(--color-primary, #720ea4);
    font-size: 1.5em;
    cursor: pointer;
    padding: 0.2em 0em;
    line-height: 1;
}

.popup-body {
    padding: 0.5em;
    overflow-y: auto;
    background: var(--color-bg-top-nav, #fff);
    color: var(--color-text, #222);
    flex: 1;
}

#popupMessage {
    padding: 1em;
}

.popup-options {
    display: flex;
    flex-direction: column;
    padding: 1em;
}

.popup-option {
    font-size: 1.2em;
    margin-bottom: 15px;
}

.popup-option.admin-only {
    display: none;
}

.popup-option.superadmin-only {
    display: none;
}

/* LOGIN POPUP SLIDE FROM TOP */
#loginPage {
    display: none;
    position: absolute;
    z-index: 2000;
    left: 0; right: 0; top: 0; bottom: 0;
}
#loginPage.active {
    display: block;
}
#loginPage .popup-content {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translate(-50%, -100%);
    transition: transform 0.4s cubic-bezier(.77,0,.18,1);
}
#loginPage.active .popup-content {
    transform: translate(-50%, 00px); /* Slides down into view */
}

/* SETTINGS POPUP SLIDE FROM TOP */
#settingsPage {
    display: none;
    position: absolute;
    z-index: 2000;
    left: 0; right: 0; top: 0; bottom: 0;
}
#settingsPage.active {
    display: block;
}
#settingsPage .popup-content {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translate(-50%, -100%);
    transition: transform 0.4s cubic-bezier(.77,0,.18,1);
}
#settingsPage.active .popup-content {
    transform: translate(-50%, 00px); /* Slides down into view */
}

/* STANDARD POPUP FADE & SCALE */
#popupPage {
    display: none;
    position: absolute;
    z-index: 2000;
    left: 0; right: 0; top: 0; bottom: 0;
}
#popupPage.active {
    display: block;
}
#popupPage .popup-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(.77,0,.18,1), opacity 0.3s;
    width: 100%;
    height: 100%;
}
#popupPage.active .popup-content {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.popup-section {
    padding-left: 1em;
    padding-right: 1em;
}

/* Standard elements */

.section-header, .section-footer {
    font-size: 1.5em;
    font-weight: 600;
    width: 300px;
    margin: auto;
    text-align: center;
    color: var(--color-text, #222);
    padding: 0.5em 0;
}

.section-header-wider, .section-footer-wider {
    width: 100%;
}

/* to stop accidentally selecting text rather than swiping */
.swipeable-section,
.swipeable-content {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.swipeable-section {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: relative;
}

.swipeable-content {
    flex: 0 0 340px;
    min-width: 340px;
    max-width: 340px;
    width: 340px;
    height: 100%;
    transition: transform 0.4s cubic-bezier(.77,0,.18,1);
    display: flex;
    flex-direction: column;
}

.swipeable-content:first-of-type {
    margin-left: calc(50% - 170px);
}

.intro-text {
    padding: 1em 1em 1.5em;
}

.section-content {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;      /* Center horizontally */
    justify-content: flex-start; /* Top align */
    min-height: 0;
}

/* tables in section */

.section-table {
    flex: 1 1 auto;
    width: 100%;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left:10px;
    padding-right: 10px; /* Move scrollbar 10px right */
    background-clip: padding-box;
}

.section-table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.section-table th,
.section-table td {
    padding: 5px 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-table th {
    position: sticky;
    top: 0;
    background: var(--color-bg-top-nav, #fff);
    z-index: 2;
    color: var(--color-table-header, #fff);
}

.section-table tr {
    color:   var(--color-table);
}

.section-table tr:nth-child(odd) {
    background: var(--color-bg-table, #fff);
}

.section-table tr:nth-child(even) {
    background: var(--color-bg-table2, #f0f0f0);
}

/* circle info button */

.circle-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    background: var(--color-primary, #1976d2);
    color: var(--color-primary-opposite, #fff);
    border: none;
    font-size: 0.7em;
    font-weight: 600;
    cursor: pointer;
    margin-left: 0.5em;
    outline: none;
    opacity: 0;
    vertical-align: middle; 
    position: relative;
    bottom: 0.1em
}

.circle-info-btn.active {
    opacity: 1;
}

.circle-info-btn span {
    font-family: inherit;
    line-height: 1;
    pointer-events: none;
}