/* 1,200..900 means italic styles from weight 200–900 */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,200..900;1,200..900&family=Montserrat:ital,wght@0,200..900;1,200..900&family=Inconsolata:ital,wght@0,200..900;1,200..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&family=Inconsolata:ital,wght@0,400;0,700;1,400;1,700&display=swap');


:root {
    --infocard-transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}


/* Light theme */
.light-theme {
    /* --bg-color:     rgb(240, 240, 240); */
    --bg-color:              rgb(240, 242, 245);
    --text-color:            #333333;
    --card-bg:               #f8f9fa;
    --border-color:          #e9ecef;
    --infocard-holo-color:   rgba(108,0,248,0.1);
    --infocard-span-color:   #6c00f8;
    --infocard-shadow-color: rgba(0,0,0,0.1);
    --raw-data-bg:           rgb(220,220,220);
}

/* Dark theme */
.dark-theme {
    --bg-color:              rgb(10,10,10);
    --text-color:            white;
    --card-bg:               rgb(17,17,17);
    --border-color:          #2d323c;
    --infocard-holo-color:   rgba(162,89,255,0.15);
    --infocard-span-color:   #a259ff;
    --infocard-shadow-color: rgba(0,0,0,0.60);
    --raw-data-bg:           rgb(17,17,17);
}



*, *::before, *::after {
  box-sizing: border-box;
}



html {
    /* font-family: Inter; */
    font-family: Montserrat;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}
/* html {background-color: rgb(200,200,200);} */


#introductory-info span {
    color: var(--infocard-span-color);
    /* text-decoration: underline; */
    /* font-style: italic; */
}
#introductory-info {
    /* font-family: Montserrat; */
    font-size: 1.2em;
    line-height: 1.5em;
    margin: 2em auto;
    width: 70%;
    padding: 1em;
    color: var(--text-color);
    /* background: linear-gradient(135deg, rgb(17,17,17) 80%, #181a20 100%); */
    background: var(--card-bg);
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 4px 24px 0 var(--infocard-shadow-color), 0 1.5px 4px 0 rgba(0,0,0,0.40);
    border: 1px solid var(--border-color);
    transition: var(--infocard-transition);
    position: relative;
    overflow: hidden;
    --holo-x: 1%;
    --holo-y: 1%;
}
#introductory-info::before {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--holo-x) var(--holo-y), var(--infocard-holo-color) 0%, rgba(0,0,0,0) 80%);
    opacity: 0;
    z-index: 0;
    transition: var(--infocard-transition);
}
#introductory-info:hover::before {
    opacity: 1;
}
#introductory-info > * {
    position: relative;
    z-index: 1;
}

.chart1 {
    width: 100%;
    max-height: 99vh;
    max-width: 99vw;
}

.flexbox {
    display: flex;
    justify-content: center;
}
.flexitem {
    width: calc(50% - 10px); /* 10px is the margin between the two pie charts */
    margin: 5px;
}

summary {
    font-family: Montserrat;
    color: var(--text-color);
    text-align: center;
    font-size: 2em;
    outline-style: solid;
    outline-width: 1px;
}

#raw_data {
    font-size: 1.2em;
    margin-left:  1%;
    margin-right: 1%;
    padding: 1%;
    color: var(--text-color);
    background-color: var(--raw-data-bg);
    /* font-family: Inconsolata; */
    font-family: monospace;
    border-radius: 5px;
    /* font-size: 0.8em; */
    text-align: left;
}

/* Calendar Plot Styles */
.controls {
    /* margin-bottom: 20px;
    padding: 15px;
    background: rgb(20, 20, 20);
    border-radius: 5px; */
    text-align: center;
}

.controls label {
    margin-right: 10px;
    font-weight: bold;
    color: var(--text-color);
}

.controls select {
    padding: 5px;
    border-radius: 3px;
    border: 1px solid #ccc;
    background: var(--card-bg);
    color: var(--text-color);
}

#cal-plots {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cal-plot {
    color: var(--text-color);
    width: 95%;
    /* max-width: 1200px; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cal-plot h3 {
    margin: 24px 0;
    font-size: 24px;
    color: var(--text-color);
    text-decoration: underline;
    font-weight: bold;
}

.cal-plot-container {
    width: 95%;
}

.cal-plot-container > svg {
    width: 100%;
    /* transform: scale(1.3); */
}

/* Legends */
/* .cal-plot-legend > div > svg {transform: scale(1.3);} */


/* Info Banners */
.banner {
    font-size: 1.1em;
    line-height: 1.4em;
    margin: 1em auto;
    width: 70%;
    padding: 0.7em;
    color: var(--text-color);
    background: var(--card-bg);
    border-radius: 16px;
    text-align: left;
    box-shadow: 0 4px 24px 0 var(--infocard-shadow-color), 0 1.5px 4px 0 rgba(0,0,0,0.40);
    border: 1px solid var(--border-color);
    transition: var(--infocard-transition);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
}

.warning-banner {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-color: #ffc107;
    color: #856404;
    /* By default it will be hidden, and will be shown only if its a mobile device */
    display: none;
}

.warning-banner .banner-icon {
    color: #f39c12;
}

.info-banner {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    border-color: #17a2b8;
    color: #0c5460;
}

.info-banner .banner-icon {
    color: #17a2b8;
}

.banner-content {
    display: flex;
    align-items: center;
    gap: 0.8em;
    flex: 1;
}

.banner-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.banner-text {
    flex: 1;
}

.banner-close {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.5em;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.banner-close:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.banner-close svg {
    width: 20px;
    height: 20px;
}

.banner.hidden {display: none;}




.laptop-text {display: inline;}
.mobile-text {display: none;}


/* If its a mobile, then the pie charts are stacked on top of each other, and the font size of "Raw Data" is made a bit smaller */
@media only screen and (max-width: 768px) {
    /* html {background-color: rgba(255,0,0,0.4);} */
    .flexbox     {flex-direction: column;}
    .flexitem    {width: 100%;}
    summary      {font-size: 1.3em;}
    .laptop-text {display: none;}
    .mobile-text {display: inline;}
    /* Make calplots fill 100% width and make legends smaller */
    .cal-plot   {width: 100%;}
    .cal-plot-legend { transform: scale(0.7); }

    .warning-banner {
        display: flex;
    }

    .banner {
        width: 90%;
        font-size: 1em;
        padding: 0.8em;
    }
    
    .banner-content {
        gap: 0.6em;
    }
    
    .banner-icon {
        width: 20px;
        height: 20px;
    }
    
    .banner-close svg {
        width: 18px;
        height: 18px;
    }
}