@import '_content/MeninGate.Audit.Web.UI/MeninGate.Audit.Web.UI.13bm1n7le3.bundle.scp.css';
@import '_content/MeninGate.DocServer.Web.UI/MeninGate.DocServer.Web.UI.ryb4giwrgj.bundle.scp.css';
@import '_content/MeninGate.DocumentManager.Web.UI/MeninGate.DocumentManager.Web.UI.d6oa0lykyf.bundle.scp.css';
@import '_content/MeninGate.Identity.Web/MeninGate.Identity.Web.gp7ojsmk5f.bundle.scp.css';
@import '_content/MeninGate.Web.UI/MeninGate.Web.UI.vvssuh9hfu.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Koepel shell. Principle "max data, min plaatsverlies": full-height, tight gutters, no wasted strips. */
.app-shell[b-pz5dks17k1] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-bar[b-pz5dks17k1] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0 1rem;
    /* min-height, not height: a fixed height cannot fail loudly. On a phone the identity cluster wrapped
       onto a second line and was simply CLIPPED by the 3rem box - the bar looked intact while half of it
       was unreachable. The cluster now folds itself (UserMenu.razor.css), and this is the second belt. */
    min-height: 3rem;
    background: #143b45;
    color: #eaf2f3;
    border-bottom: 3px solid #c0392b;
}

/* Reclaim the gutters a phone cannot spare - "max data, min plaatsverlies" applies hardest where the
   viewport is smallest. */
@media (max-width: 900px) {
    .app-bar[b-pz5dks17k1] {
        gap: .6rem;
        padding: 0 .5rem;
    }
}

/* Below this the wordmark alone has to carry the brand; "Frontdoor" is a signature, not information. */
@media (max-width: 520px) {
    .brand-sub[b-pz5dks17k1] {
        display: none;
    }
}

.brand[b-pz5dks17k1] {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    text-decoration: none;
    letter-spacing: .2px;
}

/* Subtle secondary label next to the wordmark — a quiet signature, not a banner. Mixed-case (not
   uppercased) so it reads consistently with the "EZ-Groups" wordmark beside it. */
.brand-sub[b-pz5dks17k1] {
    font-weight: 400;
    font-size: .72rem;
    letter-spacing: .3px;
    color: #7fa8b0;
}

.app-bar-right[b-pz5dks17k1] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dev-flag[b-pz5dks17k1] {
    font-size: .72rem;
    background: #f0c674;
    color: #3b2f00;
    padding: .1rem .5rem;
    border-radius: 4px;
    font-weight: 600;
}

.app-main[b-pz5dks17k1] {
    flex: 1;
    padding: .4rem .5rem .5rem;
    min-height: 0;
}

/* The way home from a module page the koepel hosts itself (Stefaan, 2026-10-08, on /frontdoor/docserver:
   "Waarom staat er hier geen huis?"). Deliberately the SAME shape, size and box as the shared
   FrontdoorLink in the 24 sub-app bars - a user who learns the house in one app must find the identical
   control here. It is not that component, because that one hides itself on the koepel by design and the
   koepel is where this has to appear; what is shared is the icon, which both take from MgIcon. */
.brand-home[b-pz5dks17k1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: .15rem;
    line-height: 0;
    opacity: .9;
    /* Eats the bar's 1.25rem gap on its right: the house and the wordmark are one affordance, not two
       items in a row, and a full gutter between them reads as "two separate things". */
    margin-right: -.85rem;
}

.brand-home:hover[b-pz5dks17k1] {
    background: rgba(0, 0, 0, .08);
    border-color: currentColor;
    opacity: 1;
}

.brand-home svg[b-pz5dks17k1] {
    flex: 0 0 auto;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-o1fytvy46l],
.components-reconnect-repeated-attempt-visible[b-o1fytvy46l],
.components-reconnect-failed-visible[b-o1fytvy46l],
.components-pause-visible[b-o1fytvy46l],
.components-resume-failed-visible[b-o1fytvy46l],
.components-rejoining-animation[b-o1fytvy46l] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-o1fytvy46l],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-o1fytvy46l],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-o1fytvy46l],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-o1fytvy46l],
#components-reconnect-modal.components-reconnect-retrying[b-o1fytvy46l],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-o1fytvy46l],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-o1fytvy46l],
#components-reconnect-modal.components-reconnect-failed[b-o1fytvy46l],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-o1fytvy46l] {
    display: block;
}


#components-reconnect-modal[b-o1fytvy46l] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-o1fytvy46l 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-o1fytvy46l 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-o1fytvy46l 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-o1fytvy46l]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-o1fytvy46l 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-o1fytvy46l {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-o1fytvy46l {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-o1fytvy46l {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-o1fytvy46l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-o1fytvy46l] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-o1fytvy46l] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-o1fytvy46l] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-o1fytvy46l] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-o1fytvy46l] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-o1fytvy46l] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-o1fytvy46l 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-o1fytvy46l] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-o1fytvy46l {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}