* {
    box-sizing: border-box;
}
/* Main page elements */
html {
    height: 100%;
    font-size: 16px;
}

body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background: #fafafa;
    color: #222;
    margin: 0px;
    padding: 0px;
    height: 100vh;
}

main {
    height: 100%;
    overflow-y: auto;
}

h1 {
    font-size: 2.0rem;
    font-weight: normal;
    color: darkblue;
    margin-block-start: 10px;
    margin-block-end: 10px;
}

h2 {
    font-size: 1.5rem;
    font-weight: normal;
    color: darkblue;
    margin-block-start: 8px;
    margin-block-end: 5px;
}

h3 {
    font-size: 1.3rem;
    margin-block-start: 8px;
    margin-block-end: 3px;
    font-weight: normal;
}

h4 {
    font-size: 1.2rem;
    margin-block-start: 8px;
    margin-block-end: 3px;
    font-weight: bold;
}

h5 {
    font-size: 1.2rem;
    margin-block-start: 8px;
    margin-block-end: 3px;
    font-weight: normal;
}

h6 {
    font-size: 1.2rem;
    font-style: italic;
    margin-block-start: 8px;
    margin-block-end: 3px;
    font-weight: normal;
}

legend {
    font-style: italic;
    color: darkblue;
}

i.fa-solid, i.fa-regular {
    font-size: 1.3rem;
}

i.clickable {
    padding: 1px 3px;
}

.container {
    margin: 12px auto;
    padding: 12px;
    border-radius: 6px;
}


textarea {
    width: 100%;
    height: 90px;
    overscroll-behavior-y: auto;
    border-radius: 8px;
    resize: none;
    padding: 7px;
}

select, input, textarea {
    font-family: unset;
    font-size: unset;
    font-weight: unset;
}

.fullwidth {
    width: 100%;
}

.hidden {
    display: none;
}

label {
    font-weight: bold;
    display: block;
    margin-top: 8px;
}

button {
    padding: 8px 14px;
    border: none;
    background: rgb(0, 120, 215);
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

button:disabled {
    background: rgba(0, 120, 215, 0.5);
    color: #ddd;
}

button.link {
    text-decoration: underline;
    font-size: 1.0rem;
    padding: 3px 0;
    border: none;
    color: blue;
    background-color: transparent;
    border-radius: 0;
    cursor: pointer;
}

.field-validation-error {
    color: #842029;
    background-color: #f8d7da;
    font-style: italic;
}

.field-validation-success {
    color: green;
    background-color: palegreen;
    font-style: italic;
}

table {
    border-collapse: collapse;
    margin-bottom: 6px;
}

table thead {
    color: white;
    background-color: #003069;
    font-weight: bolder;
}

table tr {
    vertical-align: top;
}

table td, table th {
    border-bottom: 1px solid #003069;
    padding: 5px 25px 5px 5px;
}

table td.right, table th.right {
    text-align: right;
}

table td.center, table th.center {
    text-align: center;
}


/******************* TODO: These should become obsolete *************************/

.highlight {
    background-color: #F4F59B;
}

.highlight-light {
    background-color: lightgoldenrodyellow;
}

.game-result {
    font-weight: bold;
}

.Win {
    color: green;
    font-weight: bold;
}

.Loss {
    color: darkred;
}

.validation-summary-errors {
    border: 1px solid #dc3545;
    background-color: #f8d7da;
    color: #842029;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.validation-summary ul {
    margin: 0;
    padding-left: 1.2rem;
}

.validation-summary-valid {
    display: none;
}

/* styling for all grid-tables */
.grid-table {
    display: inline-grid;
    row-gap: 6px;
    /* This is a default value only, 2 columns */
    grid-template-columns: repeat(2, auto);
}

.grid-table.sideways {
    display: inline-grid;
    row-gap: 0px;
    column-gap: 0px;
    align-items: center;
}

.grid-table > div {
    padding: 2px 10px;
    border-bottom: 2px solid #ccc;
    height: 100%;
}

.grid-table.no-gridlines > div {
    border-bottom: none;
}

.grid-table.sideways > div {
    padding: 8px 10px;
}

.grid-table > div.empty {
    padding: 2px 0px;
}

.grid-table > .grid-heading {
    color: darkblue;
    background-color: white;
    border-bottom: 2px solid #ccc;
    padding: 4px;
}
.grid-table > .grid-value {
    border-bottom: 1px solid #ccc;
    padding: 4px;
}

.grid-table.sideways > .grid-heading {
    color: darkblue;
    background-color: white;
    border-bottom: 1px solid #ccc;
    height: 100%;
}

.grid-table .right {
    text-align: right;
}

.grid-table .center {
    text-align: center;
}

.grid-table > .grid-section-1 {
    font-weight: bolder;
    /* This is a default value only, 2 columns */
    grid-column: span 2;
    font-size: 1.1rem;
    font-style: italic;
    margin-top: 0px;
    margin-bottom: 3px;
    border: 0;
    /* text-align: center;*/
}

.grid-table > .grid-section-2 {
    grid-column: span 2;
    color: darkblue;
    font-size: 1.1rem;
    font-style: italic;
    margin-top: 0;
    margin-bottom: 0;
    border: 0;
}


/* Dashboard */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.dashboard-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid #003069;
    border-radius: 5px;
    background-color: white;
    /*    box-shadow: 3px 3px 3px rgba(0,0,0,0.25);*/
}
/* Only span when the layout can support it */
@media (min-width: 640px) {
    .dashboard-card.wide {
        grid-column: span 2;
    }

    div.dashboard-card-body {
        max-height: 350px;
        overflow-y: auto;
    }
}

.dashboard-card.full {
    grid-column: 1 / -1;
}

div.dashboard-card-title {
    padding: 8px;
    background-color: #dfdfdf;
    font-weight: 600;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #003069;
    width: 100%;
    border-bottom: 1px solid #003069;
}

div.dashboard-card-body {
    flex: 1;
    padding: 8px;
}

.dashboard-card-footer {
    padding: 8px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    color: #003069;
    width: 100%;
    background-color: #fafafa;
    border-top: 2px solid #ddd;
    margin-top: auto;
}

/* 
    Styles for the phone number verified and unverified badges 
    To display a badge: <div class="phone-verified"></div>
*/
.phone-verified, .phone-unverified {
    display: inline-block;
    padding: 3px 5px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9rem;
    margin-top: 2px;
}

.phone-verified {
    color: white;
    background-color: green;
}

.phone-verified::before {
    font-family: "Font Awesome 7 Free"; /* Ensure this matches your FA version */
    font-weight: 900; /* 400 for fa-regular, 900 for fa-solid */
    content: "\f058"; /* Unicode for check */
}

.phone-verified::after {
    content: "Verified";
    font-style: italic;
    padding-left: 3px;
}

.phone-unverified {
    color: red;
    background-color: gold;
}

.phone-unverified::before {
    font-family: "Font Awesome 7 Free"; /* Ensure this matches your FA version */
    font-weight: 900; /* 400 for fa-regular, 900 for fa-solid */
    content: "\f071"; /* Unicode for triangle-excl */
}

.phone-unverified::after {
    content: "Unverified";
    font-style: italic;
    padding-left: 3px;
}

/* Roster transaction icons */
.trans-AddPlayer::before,
.trans-RemovePlayer::before,
.trans-ClaimPlayer::before,
.trans-EditPlayer::before {
    display: inline-block;
    font-style: normal;
    font-size: 1.1rem;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 7 Free"; /* Ensure this matches your FA version */
    font-weight: 900; /* 400 for fa-regular, 900 for fa-solid */
}

.trans-AddPlayer::before {
    content: "\e541";
    color: green;
}

.trans-RemovePlayer::before {
    content: "\e543";
    color: darkred;
}

.trans-ClaimPlayer::before {
    content: "\e535";
    color: lawngreen;
}

.trans-EditPlayer::before {
    content: "\e53f";
    color: red;
}

/* Mobile */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }

    /* A little extra vertical space to click on a row */
    .grid-table.clickable > div {
        padding-top: 15px;
        padding-bottom: 12px;
    }
}

/* PRINT LAYOUT */
@media print {

    @page {
        margin: 0.75in;
    }

    body {
        margin: 0; /* Prevent stacking */
    }

    header,
    footer {
        font-size: 0.85rem;
    }

    /* Optional grayscale */
    * {
        color: #000 !important;
        background: transparent !important;
    }

    /* Hide non-print stuff */
    .no-print {
        display: none !important;
    }
}

/*!
 * Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2025 Fonticons, Inc.
 */
:root, :host {
    --fa-family-classic: "Font Awesome 7 Free";
    --fa-font-solid: normal 900 1em/1 var(--fa-family-classic);
    /* deprecated: this older custom property will be removed next major release */
    --fa-style-family-classic: var(--fa-family-classic);
}

@font-face {
    font-family: "Font Awesome 7 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../webfonts/fa-solid-900.woff2");
}

.fas {
    --fa-family: var(--fa-family-classic);
    --fa-style: 900;
}

.fa-classic {
    --fa-family: var(--fa-family-classic);
}

.fa-solid {
    --fa-style: 900;
}

header {
    border-bottom: 11px solid #DC2625;
}

.GCABblue {
    color: #003069;
}

.GCABblueBG {
    background-color: #003069;
}

.bglt {
    background-color: #E7F1FF;
}

.btitle {
    color: #003069;
    font-style: italic;
}

.Femphasis {
    font-size: 1.25em;
    font-weight: 800;
}

.Demphasis {
    font-size: .75em;
    font-weight: 200;
}

.maxw100 {
    max-width: 100px;
}

.maxw200 {
    max-width: 200px;
}

.maxw250 {
    max-width: 250px;
}

.maxw300 {
    max-width: 300px;
}

.maxw400 {
    max-width: 400px;
}

.maxw500 {
    max-width: 500px;
}

.maxw600 {
    max-width: 600px;
}

.maxw700 {
    max-width: 700px;
}

.maxw800 {
    max-width: 800px;
}

.maxw900 {
    max-width: 900px;
}

.fs2 {
    font-size: 2em;
}
.fs3 {
    font-size: 3em;
}
.fs80 {
    font-size: .8em;
}
.fs90 {
    font-size: .9em;
}
.bold {font-weight: bold;}
.right {
    text-align: right;
}
.left {
    text-align: left;
}

.Postponed {
    background-color: rgba(255, 0, 0, 0.3);
}

.this-team {
    font-weight: bold;
}

#export {
    padding-top: 5px;
}

.footer {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center; /*Vertically centers content */
    padding: 8px;
    column-gap: 20px;
    border-top: 11px solid #DC2625;
    background-color: #003069;
}

.footer img {
    height: 36px;
}

.waiver-body {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}

#waiver-sign {
    margin-top: 15px;
}


/****** THE BELOW WAS RELOCATED FROM THE LAYOUT - needs to be sorted through

        user: Shows the user logo and either a logged-in user dropdown menu, or a guest dropdown menu.
******/
/* Desktop menu */
/* nav-bar, always shown, across top */
#nav-bar {
    display: flex;
    color: white;
    font-size: 1.1rem;
    align-items: flex-start; /* So User item doesn't expand vertically */
}

#menu-items {
    display: flex;
    column-gap: 10px;
    padding: 5px 7px;
}

#nav-bar button {
    color: unset;
}

/* nav-toggle (hambuger) hidden on desktop */
#nav-toggle {
    display: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 10px;
    background-color: transparent;
    margin: 5px;
    border: 1px solid white;
    height: fit-content;
}

button#user-toggle > i {
    font-size: 2.5rem;
    height: fit-content;
    background-color: transparent;
}

#nav-bar .guest {
    color: lightsteelblue;
}

.dropdown.open {
    z-index: 1000;
}

.dropdown.open > .dropdown-menu {
    display: block;
}

.dropdown-menu .dropdown-menu {
    top: 0%;
    left: calc(100% - 5px);
}

.menu-toggle,
.menu-item > a {
    display: flex;
    font-size: 1.0rem;
    background-color: transparent;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 6px 10px;
}

#nav-bar a {
    color: unset;
    text-decoration: unset;
}

#nav-bar > *:last-child {
    margin-left: auto;
    border: none;
}

/* Narrow desktop or tablet */
@@media (max-width: 1024px) {
    main {
        padding: 5px 25px 0px 25px;
    }
}

/* Mobile menu */
@@media (max-width: 880px) {
    /* Narrow the margins */
    main {
        padding: 5px 10px 0px 10px;
    }
    /* Show the toggle */
    #nav-toggle {
        display: block;
    }

    #logo > img {
        height: 35px;
    }

    #menu-items {
        flex-direction: column;
        row-gap: 10px;
        padding: 5px 7px;
    }
        /* Hide the menu-item elements */
        #menu-items > .menu-item {
            display: none;
        }
        /* When the menu-items collection is "open", show all menu-item elements */
        #menu-items.open > .menu-item {
            display: unset;
        }

    .dropdown div.option > a {
        padding: 16px 10px;
    }

    .menu-toggle,
    .menu-item > a {
        padding: 16px 10px;
    }
}


/* from Games Report */
#details-grid {
    grid-template-columns: auto minmax(auto, 1000px);
}

#message {
    color: darkred;
}

/* from Game Details */
#heading-line-1x {
    font-size: 1.2rem;
    color: darkblue;
    padding: 10px;
}

#heading-line-2x {
    font-weight: bold;
    color: darkblue;
    padding: 10px;
}

span.label {
    font-weight: bold;
}

#game-details {
    display: grid;
    grid-template-columns: auto;
    margin-bottom: 10px;
}

#game-details > div {
    padding: 10px;
    padding-right: 30px;
}

div.note-column {
    background-color: lightgoldenrodyellow;
    font-style: italic;
}


/* Remove background color and blue border when opened */
.accordion-button:not(.collapsed) {
    background-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
}