/********************************************************************************************************/
/* DASHBOARD - SHARED BY EVERY TENANT, ORGANISATION AND SCHOOL SITE                                     */
/*                                                                                                      */
/* This was eleven near-identical copies under _Styles/<TenantID>/. They differed by one colour, one     */
/* optional text colour, and drift. Everything that genuinely varies per site now comes from that        */
/* site's Config.css as a variable, so there is one file to change and the sites cannot silently         */
/* diverge again.                                                                                        */
/*                                                                                                      */
/* Variables this file reads:                                                                            */
/*     --primary-dark-color              section heading bands. Required.                                */
/*                                                                                                       */
/* --dashboard-header-text-color was read here for .HeaderText and has been retired: only NIAA and a      */
/* dead tenant ever set it, both to white, which made those headings invisible. See .HeaderText below.    */
/*                                                                                                      */
/* Loaded by Site.Master, OrganizationSite.Master and SchoolSite.Master as /_Styles/Dashboard.css.        */
/* Config.css is still per-tenant and must be loaded alongside it, or every var() here resolves to        */
/* nothing.                                                                                              */
/********************************************************************************************************/

/********************************************************************************************************/
/* Header                                                                                               */
/********************************************************************************************************/

.HeaderLogo {
    display: block;
    float: left;
    width: 120px;
    margin: 10px 20px 0px 0;
}

#HeaderWrapper {
    display: block;
    overflow: hidden;
    margin-bottom: 10px;
}

.HeaderText {
    /* Black, not a variable. This was var(--dashboard-header-text-color, inherit), and NIAA set
       that variable to white - which rendered its tournament headings white on the white
       dsFormPanelNormal the SportPages and the bracket widget sit on, i.e. invisible.

       No tenant ever wanted white. Twelve pages had already worked around it by forcing
       color: black locally; those overrides are gone now, and this is the single definition.
       Any page that genuinely needs a different header colour should say so itself rather than
       reintroduce a variable nobody sets.

       Despite the name, .HeaderText never appears on a tenant dashboard - only on tournament,
       roster, schedule and report pages. */
    color: black;
    clear: right;
    margin: 10px 0px 0px 0;
}

    .HeaderText h1 {
        font-size: 24px;
    }

    .HeaderText h2 {
        font-size: 16px;
        margin: 10px 0 20px 0;
    }


/********************************************************************************************************/
/* Dashboard Content                                                                                    */
/********************************************************************************************************/

.dashboard-content {
    display: flex;
    flex-wrap: wrap;
    background-color: transparent;
    gap: 20px;
    width: 100%;
    padding: 0 0 20px 0;
    font-family: Avalon;
    font-size: 12px;
    line-height: 1.5;
    color: black;
}

    .dashboard-content h1 {
        font-size: 28px;
        margin: 10px 0 10px 0;
        font-weight: 500;
        line-height: 1.1;
        box-sizing: border-box;
        color: white;
    }

    .dashboard-content h2 {
        padding: 2px 0px 2px 10px;
        background-color: var(--primary-dark-color);
        color: white;
        font-size: 17px;
        font-weight: bold;
        display: block;
        width: 100%;
        margin: 0 0 10px 0;
        box-sizing: border-box;
        text-transform: uppercase;
    }

    .dashboard-content p {
        margin-left: 4px;
        margin-bottom: 6px;
    }

    .dashboard-content table {
        margin: 0;
    }

        .dashboard-content table th {
        }


    .dashboard-content .TenantButton {
        color: #24569C;
        background-color: #fff;
        text-decoration: none;
        display: inline-block;
        margin-bottom: 0;
        font-weight: normal;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        background-image: none;
        border: 1px solid #ccc;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        border-radius: 4px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .dashboard-content .video {
        display: block;
        margin: auto;
        max-width: 560px;
        max-height: 315px;
        width: Calc(100vw - 40px);
        height: Calc(100vw * .56);
    }

    .dashboard-content .Banner {
        width: 100%;
    }


    /********************************************************************************************************/
    /* FLEX Layout                                                                                          */
    /********************************************************************************************************/


    .dashboard-content .dsFlexBlock20 {
        flex-grow: 1;
        width: Calc(20% - 20px);
        overflow: hidden;
    }

        .dashboard-content .dsFlexBlock25 img:not(:last-child) {
            margin: 0 0px 10px 0;
        }

    .dashboard-content .dsFlexBlock25 {
        flex-grow: 1;
        width: Calc(25% - 20px);
        overflow: hidden;
    }

        .dashboard-content .dsFlexBlock25 img:not(:last-child) {
            margin: 0 0px 10px 0;
        }

    .dashboard-content .dsFlexBlock30 {
        flex-grow: 1;
        width: 30%;
        overflow: hidden;
    }

    .dashboard-content .dsFlexBlock img:not(:last-child) {
        margin: 0 0px 10px 0;
    }

    .dashboard-content .dsFlexBlock40 {
        flex-grow: 2;
        width: Calc(40% - 20px);
    }

    .dashboard-content .dsFlexBlock50 {
        flex-grow: 2;
        width: Calc(50% - 20px);
    }

    .dashboard-content .dsFlexBlock60 {
        flex-grow: 2;
        width: 60%;
    }

    .dashboard-content .dsFlexBlock75 {
        flex-grow: 2;
        width: Calc(75% - 20px);
        
    }

    .dashboard-content .dsFlexBlock80 {
        flex-grow: 2;
        width: Calc(80% - 20px);
    }

    .dashboard-content .dsFlexBlock90 {
        flex-grow: 3;
        width: 90%;
    }

    .dashboard-content .dsFlexBlockFill {
        width: 100%;
    }

        .dashboard-content .dsFlexBlockFill:not(:last-child) {
            margin-bottom: 10px;
        }

    .dashboard-content .dsFlexBreak {
        flex-basis: 100%;
        height: 0;
    }

    /********************************************************************************************************/
    /* Dashboard COLUMNS                                                                                    */
    /*                                                                                                      */
    /* Emitted by DashboardBlocks.Render for Region Left / Center / Right, and ONLY when a block asks for    */
    /* one of them. A dashboard of Body blocks - which is every live one today - never sees this markup.     */
    /*                                                                                                      */
    /* The container above is flex-wrap, so blocks flow ACROSS it and a rail of several stacked panels       */
    /* beside one tall panel cannot be expressed. Each column here is its own flex container with the same   */
    /* gap, so the dsFlexBlockNN widths keep working inside a column - they are descendant selectors and     */
    /* resolve against the column instead of the page.                                                      */
    /********************************************************************************************************/

    .dashboard-content .dsDashboardColumns {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        width: 100%;
        /* Columns size to their own content rather than all stretching to the tallest, so a short
           rail does not drag a background or border down the page. */
        align-items: flex-start;
    }

    .dashboard-content .dsDashboardLeft,
    .dashboard-content .dsDashboardCenter,
    .dashboard-content .dsDashboardRight {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 20px;
        /* Flex items default to min-width:auto, which lets one wide table or unscaled image push a
           column past its share and squeeze the others to nothing. */
        min-width: 0;
    }

    .dashboard-content .dsDashboardLeft,
    .dashboard-content .dsDashboardRight {
        flex: 1 1 220px;
        max-width: 320px;
    }

    .dashboard-content .dsDashboardCenter {
        flex: 3 1 360px;
    }

        /* Keeps the right rail on the right when there is no centre column to push it there. */
        .dashboard-content .dsDashboardRight:last-child {
            margin-left: auto;
        }

@media (max-width: 900px) {

    /* One column per row, and the main content first - a phone should not open on a sidebar. */
    .dashboard-content .dsDashboardLeft,
    .dashboard-content .dsDashboardCenter,
    .dashboard-content .dsDashboardRight {
        flex: 1 1 100%;
        max-width: none;
    }

    .dashboard-content .dsDashboardCenter {
        order: 1;
    }

    .dashboard-content .dsDashboardLeft {
        order: 2;
    }

    .dashboard-content .dsDashboardRight {
        order: 3;
    }
}

@media (min-width: 601px) and (max-width: 900px) {

    .dashboard-content .dsFlexBlock20 {
        width: 100%;
    }

    .dashboard-content .dsFlexBlock25 {
        flex-grow: 1;
        width: Calc(50% - 20px);
        max-width: 300px;
    }

    .dashboard-content .dsFlexBlock40,
    .dashboard-content .dsFlexBlock50,
    .dashboard-content .dsFlexBlock75,
    .dashboard-content .dsFlexBlock80 {
        flex-grow: 2;
        width: 100%;
    }


    .dashboard-content .dsFlexBlock30 {
        flex-grow: 1;
        width: 45%;
    }

    .dashboard-content .dsFlexBlock60,
    .dashboard-content .dsFlexBlock90 {
        flex-grow: 2;
        width: 90%;
    }
}

@media (max-width: 600px) {
    .dashboard-content .dsFlexBlock20
    .dashboard-content .dsFlexBlock25,
    .dashboard-content .dsFlexBlock30,
    .dashboard-content .dsFlexBlock40,
    .dashboard-content .dsFlexBlock50,
    .dashboard-content .dsFlexBlock60,
    .dashboard-content .dsFlexBlock75,
    .dashboard-content .dsFlexBlock80,
    .dashboard-content .dsFlexBlock00 {
        width: 100%;
    }
}


/********************************************************************************************************/
/* IMPORTANT BLOCKS - the side-by-side pair                                                             */
/*                                                                                                      */
/* Two equal blocks in one row: one fed by an HTML file from the owner's resource folder, the other by   */
/* a SystemMenu subtree. SportPages/SportPageInfo.aspx has paired Important Dates with Important Links   */
/* this way for a long time; the school home page uses the same markup and the same pair, so this moved  */
/* out of that page's inline <style> rather than being copied into a second one.                         */
/*                                                                                                      */
/* Unscoped on purpose - these blocks are not confined to .dashboard-content. SportPageInfo puts them    */
/* inside its own column wrapper, and that is where they were already working.                           */
/********************************************************************************************************/

.ImportantWrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.ImportantBlock {
    min-height: 200px;
    background-color: white;
    max-height: 600px;
}

    .ImportantBlock h2 {
        margin: 0;
    }

    /* Scrolls inside its own block so one long list cannot drag the other block's height with it. */
    .ImportantBlock .ImportantBlockContent {
        display: block;
        font-size: 13px;
        line-height: 1.9;
        overflow-y: auto;
        height: Calc(100% - 30px);
    }

    .ImportantBlock ul {
        list-style-type: none;
        padding: 4px 8px 20px 8px;
    }

    .ImportantBlock li a {
        color: black;
        font-size: 14px;
        margin-bottom: 12px;
        line-height: 30px;
    }

        .ImportantBlock li a i {
            font-size: 18px;
            margin: 0 6px 0 0;
        }

/* The HTML-file side needs padding of its own - the links side gets it from the ul. */
.ImportantBlock .ImportantBlockContent > div,
.ImportantBlock .ImportantBlockContent > p {
    padding: 0 8px 0 8px;
}

/* Widths for the pair. NOT from dsFlexBlockNN: those rules are all scoped under
   .dashboard-content, and School.aspx's body panel is .school-content, so they never applied
   there. flex-basis rather than a 50% width means the pair splits when there is room for two
   320px columns and stacks - information on top, links underneath - when there is not, with no
   breakpoint to keep in step with anything else. Scoped to the school page so the sport page
   keeps taking its widths from dsFlexBlock50 exactly as before. */
.school-content .ImportantWrapper > .ImportantBlock {
    flex: 1 1 320px;
    min-width: 0;
}

/* Sub-headings INSIDE a block: real <h3> elements, so the block is navigable by heading and the
   reading order is h2 "Important Info" then h3 Registration / Stay Informed / Eligibility. They
   are styled back down to bold text because the banded h2 treatment belongs to the block itself -
   repeating it inside would read as three more sections rather than parts of one. */
.ImportantBlockContent h3 {
    background-color: transparent;
    color: black;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
    padding: 0;
    margin: 12px 8px 2px 8px;
    line-height: 1.4;
    width: auto;
}

    .ImportantBlockContent h3:first-child {
        margin-top: 4px;
    }

.ImportantBlockContent ol,
.ImportantBlockContent ul.SchoolInfoList {
    margin: 0 8px 8px 8px;
    padding-left: 22px;
}

/********************************************************************************************************/
/* Accessibility helpers                                                                                */
/********************************************************************************************************/

/* Text for assistive technology only - present in the accessibility tree, off-screen visually.
   Used to say "opens in a new window" on links that do, which WCAG 3.2.5 asks for and which no
   amount of styling can convey. Not display:none, which would remove it from the tree too. */
.dsVisuallyHidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    /* clip is deprecated but still what older engines honour; clip-path is the replacement. Both,
       so the text cannot become visible in either direction. */
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}