/*default to small screens*/

body {

    color: darkslategray;
    font-variation-settings: "opsz" 6, "wght" 300;
    font-family: lato, sans-serif;
    font-weight: 400;
    font-style: normal;

    margin: 0;


    /*height: 100vh;*/

    user-select: none;

}


#app {

    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1vh;


    header, footer {
        position: fixed;
        padding: 36px;


    }

    header {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 12px;

        top: 0;

        #title {
            font-weight: bold;
            font-size: 1.2em;
            text-align: center;
        }

        #searchContainer {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 4px;

            #searchField {
                width: 80vw;
                /*max-width: 50vw;*/
                padding: 8px;
                border: thin lightgray solid;
                border-radius: 8px;
                font-size: 1.2em;
                font-weight: bold;
                color: black;
                text-align: center;
                background: rgba(211, 211, 211, 0.7);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                transition: all 0.2s ease-in-out;

            }

            #typeAhead {
                max-height: 25vh;
                overflow: scroll;

                .typeAheadResult {


                    border: thin lightgray dashed;
                    background: rgba(211, 211, 211, 0.8);
                    width: 80vw;
                    /*width: 450px;*/
                    /*max-width: 50vw;*/
                    cursor: pointer;
                    padding: 8px;
                    border-radius: 8px;
                    transition: all 0.2s ease-in-out;

                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    gap: 8px;
                    align-self: flex-start;

                    .mainTypeAheadResult {
                        flex-grow: 1;

                    }

                    .subTypeAheadResult {
                        font-size: 0.7em;
                        color: gray;
                        font-weight: normal;
                    }
                }
            }
        }


    }

    footer {
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 12px;
        user-select: none;

        font-size: 0.8em;

        #legend {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 4px;

            #legendHeading {

            }

            .legendItem {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                gap: 8px;
                /*align-self: flex-start;*/

            }


        }

        #instructions {
            padding-top: 8px;
            width: 100%;


            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 4px;

            #instructionsHeading {
            }

            .instructionItem {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                gap: 8px;
                align-self: flex-start;

            }

        }
    }

    svg {
        display: block;
        width: 90vw;

        height: 50vh;
        border: thin lightgray solid;
    }

    .heading {
        font-weight: bold;
    }


}

.contextMenuButton {
    border: thin gray solid;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-size: 0.8em;
    font-weight: bold;
    color: black;
    text-align: center;
}

.tooltip {
    background: lightgray;
    border: thin gray solid;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


.circleHighlight {
    animation: pulseStroke 1s ease-in-out infinite;

}

.circle {
    display: inline-block;
    width: 20px; /* Set desired width */
    height: 20px; /* Height should match width for a circle */
    min-width: 20px;
    border-radius: 50%; /* This makes it a circle */
    background-color: rgb(152, 185, 215); /* Example fill color */
    border: thin gray solid;
}

.circlePink {
    background-color: pink

}

.circleExpense{
    /*fill: rgba(211, 211, 211, 0.23);*/
    /*stroke: gray;*/
    /*stroke-width: .03;*/
}


.typeAheadResult {

}

.largeScreenIndicator {
    position: fixed;
    bottom: 0;
    right: 0;
    text-align: right;
    background: lightgray;
    padding: 8px;
    border-radius: 4px;
    font-size: 0.8em;
    z-index: 10;
}

.geekSpeak {
    position: relative;
    z-index: 10; /* Parent stays on top */
}

.geekSpeak::after {
    position: absolute;
    top: -20px;
    left: -25px;
    content: "Techie Talk";
    font-size: 0.7em;
    font-weight: bold;
    color: #ff6b6b;
    background: #fffacd;
    border: 1px dashed #ffb6c1;
    border-radius: 3px;
    padding: 3px 6px;
    transform: rotate(-12deg);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    z-index: -1; /* Key change - now renders behind parent */
    opacity: 0.9;
    animation: floatTag 2s ease-in-out infinite alternate;
}

.seeItHereLink {
    font-size: 0.8em;
    font-weight: bold;
    /*color: #ff6b6b;*/

    /*background: #fffacd;*/
    background: lightblue;
    border: 1px dashed #ffb6c1;
    border-radius: 3px;
    padding: 6px 9px;
    transform: rotate(-12deg);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

@keyframes floatTag {
    0% {
        transform: rotate(-12deg) translateY(0);
    }
    100% {
        transform: rotate(-12deg) translateY(-3px);
    }
}

.sqlCode {
    display: block;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: #ffffff;
    background-color: #336791; /* Database blue */
    padding: 2px 8px;
    border-radius: 4px;
    border-left: 3px solid #ffcc00; /* Yellow accent like SQL highlights */
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    /*white-space: nowrap;*/
}

/* Optional hover effect */
.sqlCode:hover {
    background-color: #2a577b;
    transform: translateY(-1px);
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.blur{
    filter: blur(2px);
}

/*.comingSoon{*/

/*}*/

/* Overlay (full-screen dimmed background) */
.dialogue-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(181, 164, 164, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fade-in 0.25s ease-out;
    padding: 16px; /* Add padding for mobile screens */
}

/* Dialog box */
.dialogue-box {
    background: white;
    border-radius: 8px;
    padding: 48px;
    width: 100%; /* Set width to 100% */
    min-width: 280px; /* Minimum width for very small screens */
    max-width: 600px; /* Maximum width for large screens */
    height: auto; /* Allow height to adjust to content */
    min-height: 100px; /* Minimum height */
    max-height: calc(100vh - 32px); /* Maximum height considering overlay padding */
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    animation: slide-up 0.3s ease-out;
    margin: auto; /* Center the dialog */
}

/* Close button (top-right) */
.dialogue-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    font-size: 24px;
    color: #777;
    line-height: 1;
}


.pulsateSvgCircle {
    animation: pulsateCircleRadius 1.5s ease-in-out infinite;
    fill: red;
}

@keyframes pulsateCircleRadius {
    0%, 100% {
        r: 5;
        opacity: 1;
    }
    50% {
        r: 8;
        opacity: 0.9;
    }
}

@keyframes pulsateWithScale {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.001);
    }
}

@keyframes pulsateSvgColor {
    0%, 100% {
        fill: lightblue;
    }
    50% {
        fill: rgba(173, 216, 230, 0.36);
    }

}

@keyframes pulseStroke {
    0%, 100% {
        /*stroke: red;*/
        /*stroke-width: 1;*/
    }
    50% {
        stroke: red;
        stroke-width: 3;
    }

}

.comingSoon::after {
    content: "Coming Soon";
    font-size: 1em;
    color: gray;
    padding: 10px;
    margin: 10px;
}


.largeScreenOnly {
    display: none;
}


/*larger screens*/
@media screen and (min-width: 1200px) {

    body {
    }

    #app {

        header {
            #searchContainer {
                #searchField {
                    width: 40vw;
                }

                #typeAhead {
                    .typeAheadResult {
                        width: 40vw;
                    }
                }
            }

        }

        #title {
        }

        svg {
            height: 75vh;
        }

        footer {
            right: 6vw;
            bottom: 3vh;

            background: rgba(211, 211, 211, 0.76);
            border: thin lightgray solid;
            border-radius: 8px;
            padding: 18px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

            #legend {

            }


        }


    }

    .largeScreenOnly {
        display: block;
    }

    .smallScreenOnly {
        display: none;
    }

}