@import url("header.css");
@import url("filters.css");
@import url("ongevallen.css");
@import url("limburg.css");

/* Roboto Font for readability */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* Phosphoricons font */
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css');
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css');

/* Print styles - ensures full content is printed, not just visible viewport */
@media print {
    /* Optional: Set page orientation - uncomment if needed */
    /* @page {
        size: landscape;
    } */

    /* Remove height restrictions and overflow so all content prints */
    .content-wrapper {
        height: auto !important;
        overflow: visible !important;
        overflow-y: visible !important;
        max-height: none !important;
    }

    /* Ensure content expands naturally */
    .content {
        height: auto !important;
        overflow: visible !important;
    }

    /* Make header non-sticky - appears once at top of print */
    .header.sticky {
        position: relative !important;
        overflow: visible !important;
    }

    /* Hide interactive buttons that don't make sense in print */
    .save-docx-button,
    .save-pdf-button,
    .taipy-toggle[theme="True"],
    .taipy-pane,
    .taipy-navbar,
    [aria-label="Theme mode"] {
        display: none !important;
    }
    [role="tooltip"] {
        display: none !important;
    }



    /* Ensure all content blocks are visible */
    body, html {
        height: auto !important;
        overflow: visible !important;
    }

    /* Prevent page breaks inside important content */
    .card, .chart-container, figure {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Remove scrollbars from print */
    ::-webkit-scrollbar {
        display: none !important;
    }

    /* Fix grid layouts for print - prevent cards from overflowing */
    .limburg-welkomspagina-layout {
        display: block !important; /* Stack cards vertically */
    }

    .limburg-welkom-card,
    .limburg-thema-card,
    .grid-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 1rem !important;
    }

    /* Remove fixed widths and viewport units that cause overflow */
    * {
        max-width: 100% !important;
    }

    /* Ensure flexbox and grid items don't overflow */
    .content {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Reduce base font size slightly so 1rem is smaller */
html {
    font-size: 90%;  /* 100% is usually 16px; 90% ≈ 14.4px */
}

h1 {
    margin-block-start: 0.55em;
    margin-block-end: 0.55em;
}
h2 {
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
}

:root {
    --color-primary: rgb(237, 108, 2);
    --color-secondary: rgb(25, 118, 210);
    --color-secondary-50: rgba(25, 118, 210, 0.5); /* 50% opacity version */
    --root-bottom-margin: 1rem;
    --color-disclaimer-bg-light: #d0e7fc;
    --color-disclaimer-bg-dark: #a0b2c3;
    --color-disclaimer-background: var(--color-disclaimer-bg-light);
    /* ...other variables */
}


/* Activated when toggled to dark */
.taipy-dark {
    --color-disclaimer-background: var(--color-disclaimer-bg-dark);
}


/* Ensures header is flush with top */
#root {
    margin: 0rem !important;
}

/* Bold text are now in primary color */
strong, b  {
    font-weight: bold;
    color : var(--color-primary);
}

/* Interactive buttons pop with secondary color */
.taipy-button {
    color: var(--color-secondary);
    border-color: var(--color-secondary-50);
}
.taipy-button:hover {
    color: var(--color-primary);
}

.taipy-file-download>button {
    color: var(--color-secondary);
    border-color: var(--color-secondary-50);
}
.taipy-file-download>button:hover {
    color: var(--color-primary);
}

/* Restrict width of page */
.content{
    margin-left: 1%;
    margin-right: 1%;
}


/* Change all toggles except navbar */
.taipy-toggle:not(.toggle-navbar) .MuiToggleButtonGroup-root{
    height: 50px;
}

.taipy-toggle:not(.toggle-navbar):hover {
    color: var(--color-primary);
}

.taipy-toggle:not(.toggle-navbar) .Mui-selected{
    background-color: var(--color-secondary);
    color:white;
    height: 50px;
}

.taipy-toggle:not(.toggle-navbar) .Mui-selected .MuiTypography-root{
    color:white !important;
}

/* Toggle Text */
.taipy-toggle:not(.toggle-navbar) .MuiTypography-root{
    color: var(--color-secondary);
}

/* Toggle Text Selected */
.taipy-toggle:not(.toggle-navbar) .Mui-selected .MuiTypography-root{
    color: var(--color-secondary);
}

.css-1v9t3co.Mui-checked {
    color: var(--color-secondary);
}
.css-16ukuub.Mui-checked {
    color: var(--color-secondary);
}

/* Scrollbar styling so it doesnt interfere with header*/
.content-wrapper {
    height: calc(100vh - 82px - var(--root-bottom-margin)); /* 85px is approx height of header */
    overflow-y: scroll;
    margin-right: 0% !important;
    padding-right: 1% !important;
    padding-bottom: var(--root-bottom-margin);
}

/* Ensure custom scrollbars apply only to the scrollable section */
.content-wrapper {
    -webkit-overflow-scrolling: touch; /* Keeps smooth scrolling */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--custom-scrollbar-thumb-color) var(--custom-scrollbar-rail-color);
}

/* Override WebKit scrollbar styles only within content-wrapper */
.content-wrapper::-webkit-scrollbar {
    width: var(--custom-scrollbar-width);
}

.content-wrapper::-webkit-scrollbar-track {
    background: var(--custom-scrollbar-rail-color);
    margin-left: 5px;
}

.content-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--custom-scrollbar-thumb-color);
    border-radius: 20px;
    border: none;
}



/* ----------------------- old ----------------- */

.taipy-selector.wide {
    margin-top: 2em;
    .MuiInputBase-root {
        width: 45vw;
    }
}


.app-version-page-text {
    position: absolute;
    /* font-weight: 300; */
    top: 0.1em;
    opacity: 0.4;
    color: gray;
    /* left: 0; */
    font-size: 0.7em;
    right: var(--root-margin, 0) !important;
}


.client-handle-page-text {
    position: absolute;
    /* bottom: 0.15rem; */
    /* font-weight: 300; */
    /* bottom: calc(-0.6 * var(--root-bottom-margin, 0)) !important; */
    opacity: 0.4;
    /* color: gray; */
    /* left: 0; */
    font-size: 0.7em;
    right: var(--root-margin, 0) !important;
    /* transform: translateX(-50%); */

}

.client-handle-page-text > p {
    margin: 0 !important;
}
.welkom-content {
    /* Limit height of the content so it fills the screen and scrolls internally */
    overflow-y: auto;
    height: 80vh;
}

.heeft-u-vragen {
    /* stick to the bottom of the page */
    position: relative;
    /* bottom: 5vh; */
    left: 0;
    right: 0;
    /* padding: var(--root-margin, 0) !important; */

}





.loader-circle {
    position: fixed;
    bottom: var(--root-margin, 0);
    right: calc(2 * var(--root-margin, 0)) !important;

    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-block;
    border-top: 3px solid var(--color-secondary);
    border-right: 3px solid transparent;
    box-sizing: border-box;
    animation: rotation 0.8s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
      }

.loader-bar {
    margin-top: 16px !important;
    display: block;
    position: relative;
    height: 12px;
    width: 20%;
    margin: 0 auto;
    border: 1px solid var(--color-contrast);
    border-radius: 10px;
    overflow: hidden;
}

.loader-bar::after {
    content: '';
    width: 40%;
    height: 100%;
    background: var(--color-primary);
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    animation: animloader 2s linear infinite;
}

@keyframes animloader {
    0% {
        left: 0;
        transform: translateX(-100%);
    }

    100% {
        left: 100%;
        transform: translateX(0%);
    }
}

.plot-uitleg-tekst {
    /* vertically center this part */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2em;
    margin-bottom: 2em;
}

.risico-tree {
    .MuiCardHeader-content {
        font-weight: bold;
    }
    .MuiCardHeader-root {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .MuiCardHeader-avatar {
        margin-right: 5px;
    }
    .MuiAvatar-root {
        width: 25px;
        height: 25px;
        color: transparent; /* disable the round avatar background */
        background-color: transparent; /* disable the round avatar background */
    }
    .MuiFormControl-root {
        max-width: none;
    }
    /* Any tree elements whose id ends in -var */
    [id$="-var"] {
        font-style: italic;
    }
}

.card-disclaimer {
    /* light blue background */
    background-color: var(--color-disclaimer-background);
    color: rgb(0,0,0); /* black text */
    padding: 16px;
    /* font-size: var(--font-size-small); */
    .taipy-text p:first-of-type {
        margin-block-start: 0;
    }
    .taipy-text p:last-of-type {
        margin-block-end: 0;
        margin-block-start: 0;
    }


}


.corner-logo {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1000; /* Ensures it stays on top */
  }

.risico-block {
    border-radius: var(--border-radius);
    background-color: var(--color-paper);
    box-shadow: var(--box-shadow);
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 5px;

}
/* Remove any existing margin from .card */
.risicotree-content .card {
    padding: calc(0.6 * var(--element-padding));
    margin: 0; /* Ensure no margin */
}

/* Apply margin-top to .card elements that are immediately preceded by another .card */
.card + .card:not(.limburg-welkom-card, .limburg-thema-card) {
    margin-top: calc(0.6 * var(--element-padding));
}

/* Remove margin-top from the cards placed in grid */
.grid-card {
    margin-top: 0 !important;
}

.risicotree-content .card-title {
    margin-top: 0px;
}

/* Add a divider line (border-top) between .thema-content elements */
.risicotree-content .themanode-content + .themanode-content {
    border-top: 3px solid var(--lt-color-gray-600); /* Adjust thickness and color as desired */
    margin-top: 32px; /* Optional: Add spacing between elements */
    /*! margin-bottom: 15px; */
}

/* Remove margin above Risicoprofiel titles */
.risicotree-content .risicoprofielnode-content h3 {
    margin: 0px;
}
/* Remove margin above Risicoprofiel titles */
.risicotree-content .indicatornode-content h4 {
    margin: 0px;
}

.risicotree-content .taipy-progress-title {
    font-size: 1.2rem;
    font-style: italic;
}

.risicotree-content .taipy-progress-value {
    font-size: 1.1rem;
}

.risicotree-content .subniveau-progress-value {
    font-size: 0.9rem;
}

.docs-button {
    background: none;
    border: none;
    box-shadow: none;
    margin-left: auto; /* Pushes the button to the right */
    display: block; /* Ensures the button takes up the full width available */
}

.docs-button:not(.Mui-disabled) .MuiAvatar-circular {
    background-color: var(--color-secondary);
}
.Mui-disabled.docs-button .MuiAvatar-circular{
    background-color: rgba(0, 0, 0, 0.26); /* Grey when disabled */
}

.MuiAccordionSummary-root {
    width: fit-content;
}

.taipy-selector div[role='combobox'] {
    overflow-y: auto;
    max-height: 10rem;
}

.taipy-watermark {
    bottom: 0rem !important;
    opacity: 0.6 !important;
    color: black !important;

}

.whatif-result {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.whatif-submit > div:last-of-type {
    text-align: right;
}


/* Plotly figure menu bar */
.modebar{
    display: none !important;
}

/* EE-button */
.ee-btn-part {
    opacity: 0;
    animation: fadeInThenOut 70s ease-in-out forwards;
    animation-delay: 60s; /* Start fading in after 5 seconds */
}

/* Keyframe for fade in over 5s, stay visible for 60s, then fade out */
@keyframes fadeInThenOut {
    0% { opacity: 0; } /* Start hidden */
    7.1% { opacity: 1; } /* Fade in at 5s (5/70 = 7.1%) */
    92.8% { opacity: 1; } /*  Stay visible until 30s (35/70 = 92.8%) */
    100% { opacity: 0; } /* Fade out at 40s */
}
.ee-button {
    border: none;
}

.ee-button .MuiAvatar-circular {
    background-color: transparent;
}
.ee-button svg {
    fill: #f71e3e;
}

.page-title-with-filter {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* .taipy-progress {

    background-color: red;
    .MuiLinearProgress-root {
        height: 20px;
        .MuiLinearProgress-barColorPrimary {
            background-color: green;
         }
    }
} */

/* .toggle-subniveau {
    display: flex;
    justify-content: center;
    width: 100%;
} */

/* .thema-content {
    border: 1px solid #cccccc;
    border-radius: 5px;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
}

.thema-content .profiel-content {
    margin-left: 20px;
    background-color: #f2f2f2;
}

.thema-content .profiel-content .indicator-content {
    margin-left: 40px;
    background-color: #ebebeb;
}

.thema-content .profiel-content .indicator-content .variabele-content {
    margin-left: 60px;
    background-color: #e4e4e4;
} */

/* Base styles for all content containers */
/* .content-block {
    border: 1px solid #cccccc;
    border-radius: 5px;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
} */

/* Indent each nested content block by 20px */
/* .content-block > .content-block {
    margin-left: 20px;
} */