/* App Section Layout */
#app-section {
    display: grid;
    grid-template-columns: 1.2fr 2fr 6fr;
    grid-template-areas:
        "sidebar settings visualization"
        "watchlist watchlist watchlist";
    gap: 2rem; /* Space between settings and visualization */
    margin-top: 2rem;
    border: 3px solid #808080;
    padding: 10px; /* Adds space inside the border */
    flex-grow: 1; /* new, to ensure it stretches within <main> */
}

h1 {
    padding-top: 5rem;
}
div[id*="filter-container"] {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    grid-template-rows: auto auto auto auto; /* Four rows */
    align-items: center;
    text-align: center;
    gap: 10px; /* Adjust the gap as needed */
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #f9f9f9;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);

}

select[id*="column-select"] {
    grid-column: 1 / -1; /* Stretch across all columns */
    width: 100%;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}


input[id*="Threshold"],
input[id*="Value"] {
    width: 100%; /* Take up 40% of the width */
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}


/* This will ensure that the main container of the buttons uses flexbox to center its children */
#main-buttons {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    align-items: flex-start; /* Align buttons to the left */
    justify-content: flex-start;
}

#sidebar-bottom-buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

#settings{
    grid-area: settings;
}


#settings, #sidebar{
    overflow-y: auto; /* Allows vertical scrolling */
    flex-direction: column; /* new */
    justify-content: space-between; /* new */
    background-color: #263238;
    background-color: #302D33;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

#settings {
    height: 90vh;
}

#sidebar-wrapper{
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    height: 90vh;
}

#sidebar{
    margin: 10px;
    padding: 0.75rem 1.5rem;
    width:100%;
    flex-grow: 1;
    color: #ccc;
    overflow-y: auto;
}
#addFilterBtn, #updateButton {
    background-color: #29b6f6; /* Match the color with other buttons */
    color: white;
    padding: 10px 20px;
    margin: 10px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
    text-align: center;
    display: flex; /* for aligning icon with text */
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontal centering */
}

#updateButton{
    background-color: green;
}

#addFilterBtn span, #updateButton span {
    margin-right: 8px; /* space between icon and text */
}

main {
    display: flex; /* new */
    flex-grow: 1; /* existing */
    flex-direction: column; /* new */
    background-color: rgb(26, 26, 29);
    background-color: #3A3245;
    background-color: black;
    padding-top: 120px; /* ensure content is visible below fixed nav */
}

html{
    background-color: rgb(26, 26, 29);
}


/* Visualization Panel Styles */
#visualization {
    grid-area: visualization;
    position: relative; /* Establish a positioning context */
    flex-grow: 1; /* Take up remaining space */
    border-radius: 8px;
}

/* Visualization Container */
#visualization-container {
    background-color: #1A1A1D; /* Matching the body background */
    background-color:#302D33;
    height: 90vh; /* Increased height to match taller sidebar */
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    position: relative;
}
#subscription {
    text-align: center; /* Centers inline or inline-block elements within the container */
    /* Other styles as needed */
}

/* Settings and Visualization Titles */
#settings h2, #visualization h2 {
    color: #29b6f6; /* Light blue for titles */
    margin-bottom: 1rem;
}

/* Adjust button in the subscription box */
#subscription button {
    font-size: 1.5rem;
    margin: 0 auto;
    margin-top: 2%;
}

.trial-countdown {
    margin-left: 15px;
    font-size: 1rem;
    color: #ff4d4d;
}

.dashboard-heading {
    font-size: 2rem;
    text-align: center;
    color: #fdfdfd; /* choose a color that matches your dashboard's palette */
    margin-top: 5%; /* adjust spacing as needed */
    /* other styling as needed */
}


.node-tooltip {
    /* Sidebar tooltip anchored inside the visualization */
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 120px; /* stay below the navbar */
    right: 10px;
    max-width: 300px; /* example maximum width */
    max-height: calc(100vh - 130px); /* prevent overlap with navbar */
    overflow-y: auto; /* enables vertical scrolling */
    padding: 10px; /* add some padding inside the tooltip */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* subtle shadow for depth */
    border-radius: 4px; /* rounded corners */
    background: #fff; /* tooltip background color */
    color: #333; /* text color */
    font-size: 0.9em; /* adjust font size as needed */
    line-height: 1.4; /* line height for better readability */
    z-index: 1000000; /* ensure it's above other elements */
}

/* Style for section titles */
.node-tooltip strong {
    display: block;
    margin-bottom: 5px;
    color: #555;
    font-weight: bold;
}

/* Style for interactive elements */
.node-tooltip a {
    color: #0066cc;
    text-decoration: underline;
    cursor: pointer;
}

/* Style for key data points */
.node-tooltip .key-data {
    color: #d35400;
    font-weight: bold;
}

/* Button inside node information sidebar */
.node-tooltip button {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #29b6f6;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.node-tooltip button:hover {
    background-color: #0288d1;
}

/* Sidebar Styles */
.sidebar {
    flex-basis: 20%; /* Adjust width as needed */
    max-height: 55vh; /* Match height to visualization */
    background-color: #263238; /* Same as settings background */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    padding: 1rem;
}

.sidebar li {
    font-size: 1.1rem; /* Larger font size */
    padding: 0.5rem; /* Padding for each list item */
    border-radius: 4px; /* Rounded corners */
    margin-bottom: 0.5rem; /* Space between items */
    cursor: pointer; /* Change cursor on hover */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
}

.sidebar li:hover {
    background-color: #29b6f6; /* Light blue background on hover */
    color: white; /* White text on hover */
}



.hidden {
    display: none; /* Hide the section */
}

/* Make the toggle buttons visible */
#settings-toggle, #sidebar-toggle {
    display: block; /* Show the button */
    margin: 10px; /* Add some margin around the button */
    /* Further style the button as needed */
}

/* Ensure the announcement banner sticks to the bottom of the nav */
nav {
    grid-template-rows: auto 0px; /* Adjust 40px to match the height of your announcement banner */
}


@media (max-width: 768px) {
    /* App Section Layout */
#app-section {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "settings"
        "sidebar"
        "visualization"
        "watchlist";
    gap: 2rem; /* Space between sections */
    margin-top: 2rem;
    border: 3px solid #808080;
    padding: 10px; /* Adds space inside the border */
    flex-grow: 1; /* Ensure it stretches within <main> */
}


        /* Sidebar Styles */
    .sidebar {
        flex-basis: 20%; /* Adjust width as needed */
        max-height: 25vh; /* Match height to visualization */
        background-color: #263238; /* Same as settings background */
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        overflow-y: auto;
        padding: 1rem;
        flex: 1;
    }

    .sidebar li {
        font-size: 1.1rem; /* Larger font size */
        padding: 0.5rem; /* Padding for each list item */
        border-radius: 4px; /* Rounded corners */
        margin-bottom: 0.5rem; /* Space between items */
        cursor: pointer; /* Change cursor on hover */
        transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
    }

    .sidebar li:hover {
        background-color: #29b6f6; /* Light blue background on hover */
        color: white; /* White text on hover */
    }
    #settings{
    overflow-y: auto; /* Allows vertical scrolling */
    flex-direction: column; /* new */
    justify-content: space-between; /* new */
    background-color: #263238;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    height: 45vh;
}




    #visualization-container {
        position: relative; /* Establishes a new positioning context */
        width: 100%;
        height: 60vh;
    }

    #visualization svg {
        width: 100%;
        height: 100%;
    }

    .node-data-point {
    margin-bottom: 10px; /* Adjust as needed for desired spacing */
}

    .node-tooltip strong {
        margin-left: 1rem; /* Space between the label and its value */
        margin-right:1rem;
}

    .node-tooltip {
        /* Tooltip stays within visualization on small screens */
        flex-direction: row;
        justify-content: space-between;
        max-width: 80%;
        text-align: center;
        align-items: center;
    }
}

#dashboard-panel{
    grid-area: dashboard-panel

}

#sidebar,
#settings,
#visualization {
    border: 2px solid white;
}

#visualization-container{
    background-color: black;
}

#add-watchlist,
#import-watchlist {
    padding: 8px 15px;
    background-color: #285AC7;
    color: #fff;
    border: none;
    cursor: pointer;
    margin: 10px;
}

#add-watchlist:hover,
#import-watchlist:hover {
    background-color: #2b6cb0;
}

#watchlist-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

#watchlist-section {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    grid-area: watchlist;
}

#watchlist-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

#watchlist-table th,
#watchlist-table td {
    border: 1px solid #e2e8f0;
    padding: 12px 15px;
    text-align: left;
    color: #f1f5f9;
    background-color: #1e293b;
}

#watchlist-table th {
    background-color: #1e293b;
    color: #f1f5f9;
    font-weight: 600;
    font-size: 1rem;
}

#watchlist-table td {
    font-size: 1.1rem;
}



#watchlist-table button {
    padding: 5px 10px;
    background-color: #285AC7;
    color: #fff;
    border: none;
    cursor: pointer;
}

#watchlist-table button:hover {
    background-color: #2b6cb0;
}

@media (max-width: 600px) {
    #sidebar-wrapper,
    #settings,
    #visualization,
    #watchlist-section {
        width: 100%;
        margin: 0;
    }

    #watchlist-controls {
        flex-direction: column;
        gap: 5px;
        align-items: stretch;
    }

    div[id*="filter-container"] {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, auto);
    }

    #main-buttons,
    #sidebar-bottom-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    #main-buttons button,
    #sidebar-bottom-buttons button {
        width: 100%;
        margin: 5px 0;
    }

    #watchlist-table th,
    #watchlist-table td {
        padding: 8px;
        font-size: 0.85rem;
    }
}