/**********************************************************************************/
/* Copyright (c) 2026 Matthew Thomas Beck                                         */
/*                                                                                */
/* Licensed under the Creative Commons Attribution-NonCommercial 4.0              */
/* International (CC BY-NC 4.0). Personal and educational use is permitted.       */
/* Commercial use by companies or for-profit entities is prohibited.              */
/**********************************************************************************/





/******************************************************/
/*************** MODIFY GLOBAL ELEMENTS ***************/
/******************************************************/


/********** DIVS **********/

/***** parent div *****/

.parentDiv { /* this is done to get rid of that weird space at the bottom of the page */

    height: 100vh;
}

/***** child div *****/

.childDiv { /* this is done so I can divide the child div into 4 components */

    width: 100vw;
    display: flex;
}





/******************************************************************/
/*************** under_construction.html ANIMATIONS ***************/
/******************************************************************/





/***************************************************************************/
/*************** career_capital_monitor.html CUSTOM ELEMENTS ***************/
/***************************************************************************/

/********** MAP **********/

/***** map toggle button *****/

#mapToggleButton {

    aspect-ratio: 1/1;
    height: 50px;
    position: fixed;
    background-color: var(--secondary);
}

#mapToggleArrowRight {

    aspect-ratio: 1/1;
    height: 80%;
    margin: 10%;
    display: block;
}

#mapToggleArrowLeft {

    aspect-ratio: 1/1;
    height: 80%;
    margin: 10%;
    display: none;
}

/***** map box *****/

#mapBox { /* TODO */

    border: 3px;
    border-style: solid;
    border-color: var(--secondary);
    background-color: var(--primary);
    height: calc(65% - 3px);
    width: calc(65% - 3px);
    right: 0;
    bottom: 0;
    position: fixed;
}

/***** map title *****/

#mapTitleBox {

    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
    margin-top: 6px;
}

#mapTitleHeader {

    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

#worldMap {

    margin-top: 2.4%;
    margin-bottom: auto;
}


/********** CATEGORIES **********/

/***** category boxes *****/

.categoryBoxes {

    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
}

/***** category exit boxes *****/

.categoryExitBoxes {

    margin-right: auto;
    margin-left: 6px;
}

/***** category exits *****/

.categoryExits {

    color: white;
    height: 30px;
    margin: 0;
}

/***** category title boxes *****/

.categoryTitleBoxes {

    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
    margin-bottom: 3px;
}

/***** category headers *****/

.categoryHeaders {

    color: white;
    margin: 0;
    margin-right: auto;
    padding-right: 9px;
    align-content: center;
}

/***** category content boxes *****/

.categoryContentBoxes { /* stores all of the metric boxes */

    display: grid;
    grid-template-rows: auto 1fr;
}


/********** METRIC BOXES **********/

/***** category metric boxes *****/

.categoryMetricBoxes {

    margin: 3px;
    border: 3px;
    border-style: solid;
    border-color: var(--secondary);
    width: calc(100% - 12px);
}

/***** category metric content boxes (prevent zoom on mobile) *****/

.categoryMetricContentBoxes {

    touch-action: pan-y;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/***** Plotly chart divs (prevent zoom on mobile) *****/

[id^="plot-"] {

    touch-action: pan-y;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/***** category metric exit boxes *****/

.categoryMetricExitBoxes {

    margin-right: auto;
    margin-left: 3px;
}

/***** category metric exits *****/

.categoryMetricExits {

    color: white;
    height: 20px;
    margin: 0;
}

/***** category metric title boxes *****/

.categoryMetricTitleBoxes {

    margin: 3px;
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
}

/***** category metric headers *****/

.categoryMetricHeaders {

    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 6px;
    color: white;
    align-content: center;
}

/********** LARGE DEVICES **********/

@media only screen and (min-width: 1025px) { /* detect if screen is desktop */

    .childDiv { /* this is done so I can divide the child div into 4 components */

        height: 100vh;
        flex-direction: row;
    }

    .categoryBoxes {

        width: 25vw;
    }

    .categoryTitleBoxes {

        margin-top: calc(var(--navBarHeight) + 6px);
    }

    #mapToggleButton {

        right: 65%;
        bottom: calc(65% - 50px + 3px);
    }

    #mapBox {

        height: calc(65% - 3px);
        width: calc(65% - 3px);
        right: 0;
        bottom: 0;
    }
}


/********** MEDIUM DEVICES **********/

@media only screen and (min-width: 501px) and (max-width: 1024px) { /* detect if screen is tablet */

    .childDiv { /* this is done so I can divide the child div into 4 components */

        height: 200vh;
        flex-direction: row;
        margin-top: calc(100vh + (1 * var(--navBarHeight) - 10px + 9px));
        display: grid;
    }

    .categoryBoxes {

        width: 50vw;
    }

    .categoryTitleBoxes {

        margin-top: calc(var(--navBarHeight) + 6px);
    }

    #mapToggleButton {

        right: 0;
        bottom: calc(40% + 6px);
    }

    #mapBox {

        height: 40%;
        width: calc(100% - 6px);
        position: fixed;
    }
}


/********** SMALL DEVICES **********/

@media only screen and (max-width: 500px) { /* detect if screen is smartphone */

    .childDiv { /* this is done so I can divide the child div into 4 components */

        height: 400vh;
        flex-direction: column;
        margin-top: calc(300vh + (3 * var(--navBarHeight) - 10px + 9px));
    }

    .categoryBoxes {

        width: 100vw;
    }

    .categoryTitleBoxes {

        margin-top: 6px;
    }

    #mapToggleButton {

        right: 0;
        bottom: calc(40% + 6px);
    }

    #mapBox {

        height: 40%;
        width: calc(100% - 6px);
        position: fixed;
    }
}