/* ***************************************************
/* 1: grid layout for page
/* 2: fixed info panel (the squad of players listed)
/*    2.1: deal with scrolling
/*    2.2 general table settings
/*    2.3 table headings
/*    2.4 table detail lines 
/* 3: responsive layout 
/* *************************************************** */

/* *********************** */
/* 1: grid layout for page */
/* *********************** */
#display_wrapper {
    /* like a circle within a circle, it's a grid within a grid */ 
    display: grid;
    grid-template-columns: 5dvw 90dvw 5dvw; 
    grid-template-rows: 16dvh 4dvh 76dvh;
    grid-gap: 0; }


#heading_wrapper { grid-column: 1 / 4; 
                   grid-row: 1 / 2; }

#county_submenu  { grid-column: 1 / 4;
                   grid-row: 2 / 3; }

#fixed_panel     { grid-column: 2 / 3;
                   grid-row: 3 / 4; }

/* ************************************************* */
/* 2: fixed info panel (the squad of players listed) */
/* ************************************************* */
/*    2.1: deal with scrolling                       */
/* ************************************************* */
#fixed_panel{
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--sitedark), 1) rgba(var(--sitedark), 0.3); 
    margin-top: 1dvh;
    display: flex;
    flex-direction: column;
}

/* ********************************************* */
/*    2.2 general table settings                 */
/* ********************************************* */ 
table, th, td, tr{ border-collapse: collapse; }
td{ background: rgba(var(--sitedark), 0.1); }

/* ********************************************* */
/*    2.3 table headings                         */
/* ********************************************* */
.squad_head {
    background: rgba(var(--sitedark), 0.7);
    backdrop-filter: blur(2px);
    color:rgba(var(--sitewhite), 0.9);
    text-shadow: 2px 2px 4px rgba(var(--siteblack), 0.8);
    height: 4dvh;
    position: sticky;
    top: 0;
    z-index: 10;
    font-size: 1rem;
}
.squad_head_no       { width: 2dvw;  }
.squad_head_name     { width: 13dvw; }
.squad_head_age      { width: 4dvw;  }
.squad_head_contract { width: 7dvw;  }
.squad_head_bat      { width: 6dvw;  }
.squad_head_bowl     { width: 8dvw;  }
.squad_head_injury   { width: 50dvw; }

.squad_head_bat, 
.squad_head_bowl,
.squad_head_contract { text-align: center; }
.squad_head_injury   { text-align: left;   }

/* ********************************************* */
/*    2.4 table detail lines                     */
/* ********************************************* */
.role_line{
    height: 7dvh;
    color: rgba(var(--sitewhite), 1);
    background: rgba(var(--sitedark), 0.5);
    border-bottom: 0.5px solid rgba(var(--sitegold), 0.8);
    text-shadow: 2px 2px 4px rgba(var(--siteblack), 0.8);
    font-size: 1.1rem;
    padding-left: 0.5dvw;
}
.role_desc{ padding-left: 0.5dvw; }
.player_line{
    height: 4.5dvh;
    background: rgba(var(--sitedark), 1);
    border-bottom: 0.5px solid rgba(var(--sitegold), 0.8);
    text-shadow: 2px 2px 4px rgba(var(--siteblack), 0.8);
    font-size: 0.9rem;
    position: relative;
}
.maleplayer{
    cursor: pointer;
}
.unavailable {
    background: rgba(var(--sitedark), 0.6);
    color: rgba(var(--sitewhite), 0.8);
    text-shadow: 1px 1px 2px rgba(var(--siteblack), 0.6);
    font-style: italic;
}
.player_squadno{
    padding-left: 0.4dvw;
    color: rgba(var(--siteyellow), 1);
    text-shadow: 1px 1px 2px rgba(var(--siteblack), 0.8);
    text-align: center;
}
.player_contract { text-align: center; }
.player_bat,
.player_field{
    text-align: center;
    font-size: 0.8rem;
}
.player_name{ padding-left: 0.5dvw; }
.player_name_tabable{
    color: var(--sitecream);
    text-shadow: 2px 2px 4px rgba(var(--siteblack), 0.8);
    text-align: left;
    border: none;
    background: rgba(var(--sitedark), 0.1); 
}
.player_age{ text-align: center; }
.player_injury{ font-style: italic; }
.maleplayer:hover{
    background: rgba(var(--siteselect), 0.7);
    box-shadow: 0 0 10px rgba(var(--sitecream), 1);
}
.clickedrow{ background: rgba(var(--siteselect), 1); }
.loancounty{ color: rgba(var(--siteyellow), 0.8); }

/* ************************ */
/* 3: responsive layout     */
/* ************************ */
@media (min-width: 801px) and (max-width: 1400px) {
    #display_wrapper { grid-template-rows: 12dvh 4dvh 78dvh; }
}
@media (max-width: 800px) {
    #display_wrapper { grid-template-rows: 8dvh 4dvh 82dvh; }
    table {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .squad_head{
        width: 100%;
        display: none;
    }
    .role_line{
        width: 100%;
        height: 8dvh;
        line-height: 8dvh;
        padding-left: 2dvw;
    }
    .role_desc{ white-space: nowrap; }
    th, td {
        display: grid; 
        width: 100%;
        grid-template-columns: 35% auto;
        grid-gap: 8px;
    }
    .player_line{
        height: auto;
        padding-right: 0.5dvw;
        border-top: 0.75px solid rgba(var(--sitegold), 0.8);
        border-bottom: 0.75px solid rgba(var(--sitegold), 0.8);
    }
    .player_line td::before{
        margin-left: 0.3dvw;
        color: rgba(var(--sitebrightgold), 0.8);
        text-align: right;
    }
    .player_line td{
        padding-top: 0.4dvh;
        padding-bottom: 0.4dvh;
        font-size: 0.8rem;
        font-style: normal;
        text-align: left;
        color: rgba(var(--sitecream), 1);
    }
    .player_name_tabable{ font-size: 0.8rem; }

    .player_line td:nth-of-type(1)::before{ content: "Squad no:";     }
    .player_line td:nth-of-type(2)::before{ content: "Name:";         }
    .player_line td:nth-of-type(3)::before{ content: "Age:";          }
    .player_line td:nth-of-type(4)::before{ content: "Contract:";     }
    .player_line td:nth-of-type(5)::before{ content: "Bat:";          }
    .player_line td:nth-of-type(6)::before{ content: "Field:";        }
    .player_line td:nth-of-type(7)::before{ content: "Availability:"; }
}
@media (max-width: 400px) {
    .player_name_tabable, 
    .player_line td{
        font-size: 1rem;
    }
}