/* 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;
    }

    /* Apps section (#apps): cards stay static on hover — no lift,
       no accent border. Scoped to the ID so the "Warum" tinted
       section keeps its hover effect. */
    #apps .info-card:hover {
        transform: none;
        border-color: rgba(11, 95, 82, .12) !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;
}

/* Category heading inside a section (e.g. Monitoring & Orchestration) */
.dash-subsection-title {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #4A5D57;
    margin: 1.9rem 0 .9rem;
}

/* First category sits closer to its section title */
.dash-section-title + .dash-subsection-title {
    margin-top: 1.1rem;
}

/* Favourite star: small form-POST button in the card's top-right corner */
.service-card {
    position: relative;
}

.fav-form {
    position: absolute;
    top: .55rem;
    right: .55rem;
    margin: 0;
}

.fav-btn {
    border: 0;
    background: transparent;
    padding: .1rem .25rem;
    font-size: 1.2rem;
    line-height: 1;
    color: #B6C4BF;
    cursor: pointer;
    border-radius: 6px;
    transition: color .15s ease, background-color .15s ease;
}

    .fav-btn:hover {
        color: #E0A11B;
        background: rgba(224, 161, 27, .12);
    }

    .fav-btn.is-fav {
        color: #E0A11B;
    }

/* 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;
    }

/* Whole-card link: a transparent overlay that fills the card, so icon, title
   and description are all clickable. The Open button and the favourite star
   are lifted above it (z-index) and stay independently clickable. */
.service-card {
    position: relative;
}

.card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    text-decoration: none;
    /* keep the focus ring visible for keyboard users */
    outline-offset: 3px;
}

/* Anything interactive inside the card must sit ABOVE the overlay.
   NOTE: the star must KEEP its absolute top-right positioning — this rule
   intentionally does not change `position`, only the stacking order. */
.service-card .mud-button-root {
    position: relative;
    z-index: 2;
}

.service-card .fav-form {
    /* stays position:absolute from the .fav-form rule above */
    z-index: 2;
}

/* Whole card reacts to hover/focus */
.service-card:hover .card-overlay:focus-visible {
    outline: 2px solid #00A88E;
}

/* ---------- Info page (per-service explanation) ---------- */
.info-hero {
    display: flex;
    align-items: flex-start;
    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.8rem 2rem;
    margin-bottom: 1.4rem;
}

.info-hero-icon {
    flex: none;
    width: 62px;
    height: 62px;
    border-radius: 16px;
}

.info-hero-text h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #14231F;
    margin: .2rem 0 .5rem;
}

.info-hero-text p {
    color: #51706B;
    font-size: .97rem;
    line-height: 1.7;
    margin: 0;
}

.info-hero-text .kicker {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .74rem;
    font-weight: 700;
    color: #00A88E;
}

.info-cta {
    margin-bottom: 1.4rem;
}

/* Rich text inside an info section (resx values may contain markup) */
.info-prose {
    color: #51706B;
    font-size: .97rem;
    line-height: 1.75;
}

.info-hero-text .info-prose {
    font-size: .97rem;
}

.info-prose p {
    margin: 0 0 .9rem;
}

    .info-prose p:last-child {
        margin-bottom: 0;
    }

.info-prose ul,
.info-prose ol {
    margin: 0 0 .9rem;
    padding-left: 1.3rem;
}

.info-prose li {
    margin-bottom: .4rem;
}

.info-prose strong {
    color: #14231F;
    font-weight: 700;
}

.info-prose code {
    background: rgba(0, 168, 142, .10);
    color: #0B6F60;
    padding: .1rem .35rem;
    border-radius: 4px;
    font-family: Consolas, 'Cascadia Code', monospace;
    font-size: .86em;
    word-break: break-word;
}

.info-prose a {
    color: #00A88E;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 168, 142, .35);
}

    .info-prose a:hover {
        color: #0B6F60;
        border-bottom-color: #0B6F60;
    }

/* Facts block: two-column definition grid. Rendered by the component from
   "Label|Value" resource lines, so a wrapping value can never break alignment. */
.info-facts {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(140px, max-content) 1fr;
    gap: .55rem 1.4rem;
    align-items: start;
}

    .info-facts dt {
        color: #14231F;
        font-weight: 700;
        font-size: .9rem;
        line-height: 1.6;
    }

    .info-facts dd {
        margin: 0;
        color: #51706B;
        font-size: .93rem;
        line-height: 1.6;
        min-width: 0;
        overflow-wrap: anywhere;
    }

@media (max-width: 560px) {
    .info-facts {
        grid-template-columns: 1fr;
        gap: .15rem;
    }

    .info-facts dd {
        margin-bottom: .75rem;
    }
}

/* Links at the end of a section */
.info-docs a {
    display: inline-block;
    margin-right: 1.1rem;
    margin-bottom: .35rem;
}

/* 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;
    }

/* Spacing between the two process launcher cards */
.process-launcher-spaced {
    margin-top: 1.1rem;
}

/* Simple table used in the production guide (stateful vs stateless) */
.guide-table-wrap {
    overflow-x: auto;
    margin: 0 0 1.2rem;
}

.guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

    .guide-table th,
    .guide-table td {
        text-align: left;
        padding: .7rem .9rem;
        border-bottom: 1px solid rgba(22, 48, 43, .10);
        vertical-align: top;
        line-height: 1.6;
    }

    .guide-table th {
        font-weight: 800;
        color: #14231F;
        background: rgba(0, 168, 142, .06);
    }

    .guide-table td {
        color: #51706B;
    }

    .guide-table tr:last-child td {
        border-bottom: none;
    }

/* ---------- 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;
}

/* Ordered list inside a guide step (UI click paths) */
.guide-list {
    margin: 0 0 1.2rem;
    padding-left: 1.4rem;
    color: #51706B;
    font-size: .95rem;
    line-height: 1.75;
}

    .guide-list li {
        margin-bottom: .45rem;
    }

    .guide-list code {
        background: rgba(0, 168, 142, .10);
        color: #0B6F60;
        padding: .1rem .35rem;
        border-radius: 4px;
        font-family: Consolas, 'Cascadia Code', monospace;
        font-size: .86em;
    }

/* 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;
}