/* Shared page container — used by layout and pages */
.container {
    width: min(1180px, 92%);
    margin-inline: auto;
}

/* ================= Landing page — cards on tinted sections =================
   MudBlazor child components (MudPaper) do NOT receive the page's CSS
   isolation attribute, so scoped rules in Home.razor.css never match them.
   These overrides are global and invert the card look on the light-green
   (tinted) sections: the card blends into the section background and the
   icon bubble flips to a white tile. */
.section.tinted .info-card {
    background: transparent !important;
    border-color: rgba(11, 95, 82, .12) !important;
    box-shadow: none !important;
}

    .section.tinted .info-card:hover {
        transform: translateY(-4px);
        box-shadow: none !important;
        border-color: rgba(0, 168, 142, .4) !important;
    }

    .section.tinted .info-card .icon-bubble {
        background: #fff;
        box-shadow: 0 6px 16px rgba(11, 63, 54, .10);
    }

/* ================= Dashboard (global — MudBlazor child components don't
   receive page-scoped CSS attributes, so dashboard styles live here) ================= */
.dashboard-page {
    padding-top: 3.2rem;
}

.dash-section-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #14231F;
    margin: 2.4rem 0 1.1rem;
}

/* Equal-height card grid */
.cards-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

/* Apps section intro sits tighter above the cards */
.dash-apps-lead {
    margin: -0.4rem 0 1.2rem;
}

/* SaaS apps get a blue-ish icon tint to distinguish them from services */
.service-card .icon-bubble.app {
    background: rgba(30, 100, 190, .10);
    color: #1E64BE;
}

    .service-card .icon-bubble.app .mud-icon-root {
        color: #1E64BE;
    }

.service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(22, 48, 43, .08);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(11, 63, 54, .06);
    /* Generous inner padding — icons, text and button breathe */
    padding: 1.6rem 1.7rem;
    transition: transform .2s ease, box-shadow .2s ease;
}

    .service-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(11, 63, 54, .11);
    }

    /* Icon in front of the title, vertically centered as a row */
    .service-card .service-head {
        display: flex;
        align-items: center;
        gap: .95rem;
        margin-bottom: 1.05rem;
    }

    .service-card .service-head .icon-bubble {
        flex: none;
    }

    /* Icon bubble — sized here because Home's scoped styles don't apply */
    .service-card .icon-bubble {
        width: 48px;
        height: 48px;
        border-radius: 13px;
        display: inline-grid;
        place-items: center;
        background: rgba(0, 168, 142, .12);
        color: #007A69;
    }

        .service-card .icon-bubble .mud-icon-root {
            color: #007A69;
        }

    .service-card h3 {
        font-size: 1.06rem;
        font-weight: 700;
        color: #14231F;
        margin: 0;
        line-height: 1.35;
    }

    /* Description gets its own comfortable spacing */
    .service-card p {
        color: #51706B;
        line-height: 1.7;
        font-size: .95rem;
        margin: 0 0 1.35rem;
        flex: 1; /* pushes the Open button to the same bottom position */
    }

    /* Button row: left-aligned, never stretched */
    .service-card .mud-button-root {
        align-self: flex-start;
        font-weight: 600;
    }

/* Info note under the cards */
.dash-note {
    display: flex;
    align-items: center;
    gap: .8rem;
    background: rgba(0, 168, 142, .08);
    border: 1px solid rgba(0, 168, 142, .28);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    color: #0B6F60;
    font-size: .95rem;
    font-weight: 600;
    margin-top: 2.6rem;
}

    .dash-note .mud-icon-root {
        color: #0B6F60;
        flex: none;
    }

/* ---------- Admin: processes ---------- */
/* Shared header row (icon + title/description) */
.process-head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .process-head .icon-bubble {
        flex: none;
        width: 48px;
        height: 48px;
        border-radius: 13px;
        display: inline-grid;
        place-items: center;
        background: rgba(0, 168, 142, .12);
        color: #007A69;
    }

    .process-head .mud-icon-root {
        color: #007A69;
    }

    .process-head h4 {
        font-size: 1.12rem;
        font-weight: 800;
        color: #14231F;
        margin: 0 0 .25rem;
    }

    .process-head p {
        color: #51706B;
        font-size: .93rem;
        margin: 0;
    }

/* Launcher card on the dashboard — one entry per process */
.process-launcher {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    background: #fff;
    border: 1px solid rgba(22, 48, 43, .08);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(11, 63, 54, .06);
    padding: 1.5rem 1.8rem;
    flex-wrap: wrap;
}

    .process-launcher .process-head {
        flex: 1;
        min-width: 260px;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .process-launcher .mud-button-root {
        font-weight: 700;
        flex-shrink: 0;
    }

/* ---------- Admin: process guide page ---------- */
.process-page {
    padding-top: 2.2rem;
}

.process-narrow {
    max-width: 860px;
}

.process-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #51706B;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    margin-bottom: 1.6rem;
    transition: color .15s ease;
}

    .process-back:hover {
        color: #00A88E;
    }

/* One numbered step */
.guide-step {
    background: #fff;
    border: 1px solid rgba(22, 48, 43, .08);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(11, 63, 54, .06);
    padding: 1.9rem 2rem;
    margin-bottom: 1.5rem;
}

.guide-step-head {
    display: flex;
    align-items: center;
    gap: .95rem;
    margin-bottom: .9rem;
}

.guide-num {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: #00A88E;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 6px 14px rgba(0, 168, 142, .35);
}

    .guide-step-head h3 {
        font-size: 1.12rem;
        font-weight: 800;
        color: #14231F;
        margin: 0;
    }

.guide-step > p {
    color: #51706B;
    line-height: 1.75;
    font-size: .97rem;
    margin: 0 0 1.1rem;
}

/* Command block */
.guide-code {
    background: #10231F;
    color: #D9F2EC;
    border-radius: 12px;
    padding: 1rem 1.2rem;
    overflow-x: auto;
    margin: 0 0 1.2rem;
    font-size: .86rem;
    line-height: 1.6;
}

    .guide-code code {
        font-family: Consolas, 'Cascadia Code', monospace;
        background: transparent;
        color: inherit;
        padding: 0;
    }

/* Screenshot figure (placeholder for now) */
.guide-fig {
    margin: 0 0 1.2rem;
}

    .guide-fig img {
        width: 100%;
        border-radius: 12px;
        border: 1px solid rgba(22, 48, 43, .10);
    }

    .guide-fig figcaption {
        color: #51706B;
        font-size: .85rem;
        margin-top: .45rem;
        text-align: center;
    }

/* Callouts: info / tip / warn */
.callout {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    border-radius: 12px;
    padding: .85rem 1.1rem;
    font-size: .92rem;
    line-height: 1.6;
    margin: 0 0 1.2rem;
}

    .callout .mud-icon-root {
        flex: none;
        margin-top: .15rem;
    }

    .callout.info {
        background: rgba(0, 120, 200, .07);
        border: 1px solid rgba(0, 120, 200, .22);
        color: #1B5A8A;
    }

    .callout.tip {
        background: rgba(0, 168, 142, .08);
        border: 1px solid rgba(0, 168, 142, .28);
        color: #0B6F60;
    }

    .callout.warn {
        background: rgba(220, 150, 0, .09);
        border: 1px solid rgba(220, 150, 0, .30);
        color: #8A5A00;
    }

/* Buttons at the end of a step */
.guide-actions {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
}

/* Finish banner */
.guide-done {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(0, 168, 142, .12), rgba(11, 111, 96, .08));
    border: 1px solid rgba(0, 168, 142, .30);
    border-radius: 18px;
    padding: 1.5rem 1.8rem;
}

    .guide-done .mud-icon-root {
        color: #00A88E;
        flex: none;
    }

    .guide-done h3 {
        font-size: 1.1rem;
        font-weight: 800;
        color: #14231F;
        margin: 0 0 .25rem;
    }

    .guide-done p {
        color: #51706B;
        font-size: .93rem;
        margin: 0;
    }

@media (max-width: 640px) {
    .guide-step {
        padding: 1.4rem 1.3rem;
    }
}

/* Anonymous sign-in hint below the services */
.dash-signin-hint {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: linear-gradient(135deg, rgba(0, 168, 142, .10), rgba(11, 111, 96, .08));
    border: 1px solid rgba(0, 168, 142, .30);
    border-radius: 18px;
    padding: 1.6rem 1.8rem;
    margin-top: 2.6rem;
    flex-wrap: wrap;
}

    .dash-signin-hint .icon-bubble {
        background: rgba(0, 168, 142, .18);
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 13px;
        display: inline-grid;
        place-items: center;
    }

    .dash-signin-hint h3 {
        font-size: 1.12rem;
        font-weight: 800;
        color: #14231F;
        margin: 0 0 .3rem;
    }

    .dash-signin-hint p {
        color: #51706B;
        line-height: 1.65;
        font-size: .95rem;
        margin: 0;
        max-width: 60ch;
    }

    .dash-signin-hint .mud-button-root {
        margin-left: auto;
        font-weight: 700;
        flex-shrink: 0;
    }

@media (max-width: 980px) {
    .cards-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .cards-3 {
        grid-template-columns: 1fr;
    }

    .dashboard-page {
        padding-top: 2rem;
    }

    .dash-signin-hint .mud-button-root {
        margin-left: 0;
        width: 100%;
    }
}

/* Wider container on very large screens so content doesn't look lost */
@media (min-width: 1600px) {
    .container {
        width: min(1320px, 88%);
    }
}

/* Remove Bootstrap base line-height so MudBlazor typography applies cleanly */
body {
    line-height: normal;
    /* Never let a wide element stretch the layout on small screens */
    overflow-x: clip;
}

/* Comfortable reading width on large desktop displays */
@media (min-width: 2000px) {
    body {
        font-size: 1.05rem;
    }
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}