/* *********************** */
/* 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: 7.5dvw 85dvw 7.5dvw; 
    grid-template-rows: 16dvh 4dvh 76dvh;
    grid-gap: 0; }


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

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

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


/* ********************** */
/* 2: deal with scrolling */
/* ********************** */
#fixed_panel{   
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--sitedark), 1) rgba(var(--sitedark), 0.3); 
    overflow-x: hidden;
    margin-top: 1dvh;
}

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

/* *******************/
/* 4: table headings */
/* *******************/
.standings_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);
    outline: 1px solid rgba(var(--sitegold), 1);
    height: 4vh;
    position: sticky;
    font-size: 0.9rem;
    top: 0;
    z-index: 10;
}

/* 4.1 standings table headings (all formats) */
/* 4.1.1 standings table (first class) headings */
.standings_fc_head_group      { text-align: left;  padding-left: 1dvw;  width: 19vw; }
.standings_fc_head_matches    { text-align: right; padding-right: 1dvw; width: 6vw; }
.standings_fc_head_won        { text-align: right; padding-right: 1dvw; width: 6vw; }
.standings_fc_head_lost       { text-align: right; padding-right: 1dvw; width: 6vw; }
.standings_fc_head_tied       { text-align: right; padding-right: 1dvw; width: 6vw; }
.standings_fc_head_drawn      { text-align: right; padding-right: 1dvw; width: 6vw; }
.standings_fc_head_abandonded { text-align: right; padding-right: 1dvw; width: 6vw; }
.standings_fc_head_cancelled  { text-align: right; padding-right: 1dvw; width: 6vw; }
.standings_fc_head_batbonus   { text-align: right; padding-right: 1dvw; width: 6vw; }
.standings_fc_head_bowlbonus  { text-align: right; padding-right: 1dvw; width: 6vw; }
.standings_fc_head_dead       { text-align: right; padding-right: 1dvw; width: 6vw; }
.standings_fc_head_points     { text-align: right; padding-right: 1dvw; width: 6vw; }

/* 4.2 standings table (white ball) headings */
.standings_wb_head_group      { text-align: left; width: 21vw; padding-left: 1dvw; }
.standings_wb_head_matches    { text-align: right; width: 6vw; }
.standings_wb_head_won        { text-align: right; width: 6vw; }
.standings_wb_head_lost       { text-align: right; width: 6vw; }
.standings_wb_head_drawn      { text-align: right; width: 6vw; }
.standings_wb_head_tied       { text-align: right; width: 6vw; }
.standings_wb_head_abandonded { text-align: right; width: 6vw; }
.standings_wb_head_cancelled  { text-align: right; width: 6vw; }
.standings_wb_head_dead       { text-align: right; width: 6vw; }
.standings_wb_head_points     { text-align: right; width: 6vw; }
.standings_wb_head_netrunrate { text-align: right; width: 10vw; padding-right: 1dvw; }

/* 4.3 table detail lines */
.standings_line {
    height: 4.5vh;
    background: rgba(var(--sitedark), 0.7);
    text-shadow: 2px 2px 4px rgba(var(--siteblack), 0.8);
    border-bottom: 0.4px solid rgba(var(--sitegold), 1);
    font-size: 0.9rem;
}
table tr:nth-child(even) { background: rgba(var(--sitedark), 0.5); }
#countystanding,
.countyofinterest{
    color: rgba(249 166 2);
}

/* 4.4 standings table detail lines (all formats)   */
/* 4.4.1 standings table (first class) detail lines */
.standing_fc_name       { padding-left: 1dvw; text-align: left; }
.standing_fc_matches    { text-align: right; padding-right: 1dvw; }
.standing_fc_won        { text-align: right; padding-right: 1dvw; }
.standing_fc_lost       { text-align: right; padding-right: 1dvw; }
.standing_fc_drawn      { text-align: right; padding-right: 1dvw; }
.standing_fc_tied       { text-align: right; padding-right: 1dvw; }
.standing_fc_abandonded { text-align: right; padding-right: 1dvw; }
.standing_fc_cancelled  { text-align: right; padding-right: 1dvw; }
.standing_fc_batbonus   { text-align: right; padding-right: 1dvw; }
.standing_fc_bowlbonus  { text-align: right; padding-right: 1dvw; }
.standing_fc_penalties  { text-align: right; padding-right: 1dvw; }
.standing_fc_points     { text-align: right; padding-right: 1dvw; }

/* 4.4.2 standings table (white ball) detail lines */
.standing_wb_name       { padding-left: 1dvw; text-align: left; }
.standing_wb_matches    { text-align: right; }
.standing_wb_won        { text-align: right; }
.standing_wb_lost       { text-align: right; }
.standing_wb_drawn      { text-align: right; }
.standing_wb_tied       { text-align: right; }
.standing_wb_abandonded { text-align: right; }
.standing_wb_cancelled  { text-align: right; }
.standing_wb_penalties  { text-align: right; }
.standing_wb_points     { text-align: right; }
.standing_wb_netrunrate { text-align: right; padding-right: 1dvw; }

/* ******************** */
/* 5: 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-columns: 2.5dvw 95dvw 2.5dvw; 
        grid-template-rows: 8dvh 4dvh 82dvh; 
    }
    .standings_list {
        width: 100%;
        margin: 0;
        font-size: 0.8rem;
    }
    .standings_line { font-size: 0.8rem; }
    .standings_head { font-size: 0.7rem; }
    .table_sticky {
        position: sticky;
        top: 0;
        z-index: 20;
    }
}