/* Anonymous-user view for /aiassistants/ page.
   Dark purple hero with 3 steps + AI assistants circle graphic, plus marketing footer
   (footer markup + styles mirror PR #354's templates/freeuser/footer.html). */

.mcp-anon-hero {
    background: linear-gradient(160deg, #110129 0%, #1a0044 100%);
    color: #ffffff;
    padding: 60px 0 80px 0;
    width: 100%;
}

/* When the hero is the last thing on the page (no marketing footer),
   extend it so the bottom of the viewport doesn't show the white body
   background.  300px is an approximation of the navbar + report-header
   height above the hero. */
.mcp-anon-hero--fill {
    min-height: calc(100vh - 300px);
}

/* Logged-in layout pushes the steps into a narrower column; shrink the
   step number and drop the aside icon so the description has room to breathe. */
.mcp-anon-hero--fill .mcp-anon-step {
    gap: 14px;
    margin-bottom: 36px;
}
.mcp-anon-hero--fill .mcp-anon-step-number {
    flex: 0 0 56px;
    font-size: 56px;
}
.mcp-anon-hero--fill .mcp-anon-step-aside {
    display: none;
}

.mcp-anon-hero > .container {
    max-width: 1400px;
    padding-left: 30px;
    padding-right: 30px;
}

/* Add breathing room between the steps column and the graphic/panel on lg+ screens.
   Bootstrap 4's default 15px gutter feels tight at these column widths. */
@media (min-width: 992px) {
    .mcp-anon-hero .row > [class^="col-lg-"]:first-child {
        padding-right: 45px;
    }
    .mcp-anon-hero .row > [class^="col-lg-"]:last-child {
        padding-left: 45px;
    }
}

.mcp-anon-hero h3,
.mcp-anon-hero h4 {
    color: #ffffff;
    font-weight: 300;
}

.mcp-anon-steps-heading {
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 40px;
    color: #ffffff;
    opacity: 0.9;
}

.mcp-anon-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 48px;
    gap: 20px;
}

.mcp-anon-step-number {
    font-size: 72px;
    font-weight: 300;
    line-height: 1;
    color: #ffffff;
    flex: 0 0 90px;
    text-align: center;
}

.mcp-anon-step-body {
    flex: 1 1 auto;
    padding-top: 12px;
}

.mcp-anon-step-body h3 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 12px;
    color: #ffffff;
}

.mcp-anon-step-body p {
    color: #7ab8ff;
    font-size: 0.9rem;
    margin-bottom: 0;
}

.mcp-anon-step-aside {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 8px;
}

.mcp-anon-register-btn {
    background: linear-gradient(90deg, #1c8ff7 0%, #1cf4f4 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 10px 24px;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.mcp-anon-register-btn:hover {
    opacity: 0.92;
    color: #ffffff !important;
}

.mcp-anon-signin-hint {
    font-size: 0.8rem;
    color: #c9d5ff;
    margin-top: 10px;
    text-align: center;
}

.mcp-anon-signin-hint a {
    color: #1cf4f4;
    text-decoration: underline;
}

.mcp-anon-step-icon {
    width: 90px;
    height: auto;
    opacity: 0.95;
}

.mcp-anon-step-icon-fa {
    font-size: 64px;
    color: #1cf4f4;
    opacity: 0.9;
}

.mcp-anon-graphic {
    max-width: 420px;
    width: 100%;
    height: auto;
}

/* ----- Logged-in variants: create CTA and apps table ----- */

.mcp-anon-messages {
    margin-bottom: 20px;
}

.mcp-anon-create-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 18px;
    padding: 40px 20px;
    width: 100%;
}

.mcp-anon-create-cta .mcp-anon-step-icon-fa {
    font-size: 96px;
}

.mcp-anon-create-cta-text {
    color: #c9d5ff;
    font-size: 0.95rem;
    max-width: 340px;
    margin: 0;
}

.mcp-anon-apps-panel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    overflow: hidden;
}

.mcp-anon-apps-header {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mcp-anon-apps-header h5 {
    color: #ffffff;
    font-weight: 400;
}

.mcp-anon-apps-table {
    color: #ffffff;
    background: transparent;
    margin-bottom: 0;
}

.mcp-anon-apps-table thead th {
    color: #c9d5ff;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-top: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
}

.mcp-anon-apps-table tbody td {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    vertical-align: middle;
}

.mcp-anon-apps-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.04);
}

.mcp-anon-apps-table tbody td a,
.mcp-anon-apps-table tbody td a:visited {
    color: #1cf4f4;
    text-decoration: none;
}

.mcp-anon-apps-table tbody td a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Keep the white-on-purple action buttons (View/Edit/Delete) unchanged. */
.mcp-anon-apps-table tbody td a.btn,
.mcp-anon-apps-table tbody td a.btn:visited,
.mcp-anon-apps-table tbody td a.btn:hover {
    color: #ffffff;
    text-decoration: none;
}

.mcp-anon-apps-table code {
    color: #7ab8ff;
    background: rgba(0, 0, 0, 0.25);
    padding: 2px 6px;
    border-radius: 3px;
}

/* ----- Shared dark-hero overrides for card / form / detail pages ----- */

.mcp-anon-hero .card,
.mcp-anon-hero .card.panel-dashboard {
    /* theme.css uses !important on .card background-color and border-color,
       so we match it here to win the cascade. */
    background: rgba(255, 255, 255, 0.05) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    border-radius: 6px;
    color: #ffffff !important;
    /* Reset .panel-dashboard's tight line-height & thin weight that make
       short text (e.g. confirm_delete) render smaller than other pages. */
    line-height: 1.5;
    font-weight: 400;
    margin-right: 0;
}
.mcp-anon-hero .card-header,
.mcp-anon-hero .panel-dashboard .card-header {
    background: rgba(255, 255, 255, 0.05) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* qomplypi.css sets global `p { font-size: .65rem }` and `h5 { font-size: .85rem }`
   which makes the delete/form pages' body text + titles look tiny. Restore a
   readable size inside cards on these pages. */
.mcp-anon-hero .card p {
    font-size: 1rem;
    line-height: 1.5;
}
.mcp-anon-hero .card-header h5 {
    font-size: 1rem;
    font-weight: 500;
}
.mcp-anon-hero .card-body,
.mcp-anon-hero .card-footer {
    color: #ffffff;
}
.mcp-anon-hero .card-footer {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.mcp-anon-hero .card-body a:not(.btn),
.mcp-anon-hero .card-body a:not(.btn):visited {
    color: #1cf4f4;
}
.mcp-anon-hero .card-body a:not(.btn):hover {
    color: #ffffff;
}

/* Inline code on dark bg — kept readable outside tables too */
.mcp-anon-hero code {
    color: #7ab8ff;
    background: rgba(0, 0, 0, 0.25);
    padding: 2px 6px;
    border-radius: 3px;
}

/* Inner tables inside cards (detail page next-steps etc.) */
.mcp-anon-hero .card .table {
    color: #ffffff;
    background: transparent;
    margin-bottom: 0;
}
.mcp-anon-hero .card .table th,
.mcp-anon-hero .card .table td {
    border-color: rgba(255, 255, 255, 0.15);
    background: transparent;
    vertical-align: middle;
}
.mcp-anon-hero .card .table-bordered,
.mcp-anon-hero .card .table-bordered th,
.mcp-anon-hero .card .table-bordered td {
    border-color: rgba(255, 255, 255, 0.15);
}

/* Definition list (detail page "Full details") */
.mcp-anon-hero dl dt,
.mcp-anon-hero dl dd {
    color: #ffffff;
}

/* Form labels / helper text — keep inputs themselves white for readability */
.mcp-anon-hero label,
.mcp-anon-hero .form-check-label {
    color: #ffffff;
}
.mcp-anon-hero .form-text,
.mcp-anon-hero small.text-muted {
    color: #c9d5ff !important;
}
.mcp-anon-hero .form-control-plaintext {
    color: #ffffff;
}

/* Alerts re-skinned for dark bg. The card's `color: #fff !important` propagates
   into the alert, so pair each translucent tint with an explicit text color. */
.mcp-anon-hero .alert-secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff !important;
}
.mcp-anon-hero .alert-warning {
    background: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.4);
    color: #ffe27a !important;
}
.mcp-anon-hero .alert-success {
    background: rgba(40, 167, 69, 0.18);
    border-color: rgba(40, 167, 69, 0.45);
    color: #9be8a9 !important;
}
.mcp-anon-hero .alert-info {
    background: rgba(23, 162, 184, 0.18);
    border-color: rgba(23, 162, 184, 0.45);
    color: #9fdfea !important;
}
.mcp-anon-hero .alert-danger {
    background: rgba(220, 53, 69, 0.18);
    border-color: rgba(220, 53, 69, 0.5);
    color: #f4a2a9 !important;
}
.mcp-anon-hero .alert-secondary code,
.mcp-anon-hero .alert-warning code,
.mcp-anon-hero .alert-success code,
.mcp-anon-hero .alert-info code,
.mcp-anon-hero .alert-danger code {
    color: #7ab8ff;
}
.mcp-anon-hero .alert .close {
    color: inherit;
    opacity: 0.7;
}

/* Collapsible card-header look (cog / info-circle toggles on detail + form) */
.mcp-anon-hero .card-header[data-toggle="collapse"] {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #c9d5ff !important;
}
.mcp-anon-hero .card-header[data-toggle="collapse"] small.text-muted {
    color: #c9d5ff !important;
}

/* Platform-picker pills (form.html) — make inactive state legible on purple */
.mcp-anon-hero .platform-btn {
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
}
.mcp-anon-hero .platform-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* "Back to list" dark button on dark bg — lighten it slightly */
.mcp-anon-hero .btn-dark {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.25);
}
.mcp-anon-hero .btn-dark:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Inner container lift — give breathing room above wrapped content */
.mcp-anon-hero > .container.mt-4 {
    padding-top: 10px;
}

@media (max-width: 991.98px) {
    .mcp-anon-hero {
        padding: 40px 20px 60px 20px;
    }
    .mcp-anon-step {
        flex-wrap: wrap;
    }
    .mcp-anon-step-aside {
        flex: 1 1 100%;
        padding-top: 16px;
    }
    .mcp-anon-step-number {
        font-size: 56px;
        flex: 0 0 64px;
    }
}

@media (max-width: 575.98px) {
    .mcp-anon-step-number {
        font-size: 48px;
        flex: 0 0 56px;
    }
    .mcp-anon-step-body h3 {
        font-size: 1.2rem;
    }
}


/* ----- Marketing footer (mirrored from PR #354 freeuser.css) ----- */

.footer {
    padding: 4rem 2rem;
    padding-bottom: calc(4rem + constant(safe-area-inset-bottom));
    padding-bottom: calc(4rem + env(safe-area-inset-bottom));
    padding-left: calc(2rem + constant(safe-area-inset-left));
    padding-left: calc(2rem + env(safe-area-inset-left));
    padding-right: calc(2rem + constant(safe-area-inset-right));
    padding-right: calc(2rem + env(safe-area-inset-right));
    font-size: 1rem;
    color: #ffffff;
    background: linear-gradient(140deg, #110129 0%, #253a7c 100%);
}

.footer a {
    text-decoration: none;
    color: #ffffff;
}

.footer .footer__content {
    display: grid;
    gap: 2rem;
    max-width: 40rem;
    margin: 0 auto;
}

.footer .footer__brand {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer .footer__brand img {
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    max-width: 100%;
    height: auto;
}

.footer .footer__contact {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footer .footer__contact-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.footer .footer__contact-buttons > a {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: flex-start;
    min-width: 15rem;
    padding: 0.75rem 1rem;
    color: #ffffff;
    background: linear-gradient(140deg, rgba(147, 144, 144, 0.22) 0%, rgba(255, 255, 255, 0.10) 100%);
    border-radius: 0.25rem;
}

.footer .footer__social-icons {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
}

.footer .footer__title {
    margin: 0 0 0.5rem;
    font-family: Syncopate, avenir-lt-pro, Avenir, Nunito, Arial, Helvetica, sans-serif;
    font-size: 0.875rem;
    text-transform: uppercase;
}

.footer .footer__menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer .footer__menu > li {
    display: block;
    margin: 0.25rem 0;
    line-height: 1.25;
}

.footer .footer__menu > li:first-child {
    margin-top: 0;
}

.footer .footer__menu > li:last-child {
    margin-bottom: 0;
}

.footer .footer__menu > li > a {
    font-size: 0.875rem;
    color: #ffffff;
}

.footer .footer__copyright {
    font-size: 0.875rem;
}

.footer .footer__copyright > :first-child {
    margin-top: 0;
}

.footer .footer__copyright > :last-child {
    margin-bottom: 0;
}

@media (min-width: 576px) {
    .footer .footer__content {
        grid-template-columns: 3fr 2fr;
    }
    .footer .footer__brand {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .footer .footer__contact {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .footer .footer__nav.footer__nav--locations {
        display: flex;
        grid-column: 1 / -1;
        grid-row: 3;
        flex-direction: column;
        align-items: center;
    }
    .footer .footer__nav.footer__nav--locations .footer__menu {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
    }
    .footer .footer__nav.footer__nav--locations .footer__menu > li {
        display: inline-block;
        margin: 0;
    }
    .footer .footer__nav.footer__nav--solutions {
        grid-column: 1;
        grid-row: 4;
    }
    .footer .footer__nav.footer__nav--training {
        grid-column: 1;
        grid-row: 5;
    }
    .footer .footer__nav.footer__nav--resources {
        grid-column: 2;
        grid-row: 4 / 6;
    }
    .footer .footer__copyright {
        grid-column: 1 / -1;
        grid-row: 6;
    }
}

@media (min-width: 1280px) {
    .footer .footer__content {
        grid-template-columns: 2fr 3fr 2fr;
        grid-template-rows: auto 2rem auto 2rem auto 2rem auto 2rem auto auto;
        row-gap: 0;
        max-width: 80rem;
    }
    .footer .footer__brand,
    .footer .footer__contact-buttons,
    .footer .footer__social-icons {
        justify-content: flex-start;
    }
    .footer .footer__contact {
        grid-column: 1;
        grid-row: 3 / span 3;
    }
    .footer .footer__nav.footer__nav--locations {
        grid-column: 1;
        grid-row: 6 / span 2;
        align-items: flex-start;
    }
    .footer .footer__nav.footer__nav--locations .footer__menu {
        flex-direction: column;
        gap: 0.25rem;
        align-items: flex-start;
    }
    .footer .footer__nav.footer__nav--solutions {
        grid-column: 2;
        grid-row: 2 / span 2;
    }
    .footer .footer__nav.footer__nav--training {
        grid-column: 2;
        grid-row: 5;
    }
    .footer .footer__nav.footer__nav--resources {
        grid-column: 3;
        grid-row: 2 / span 4;
    }
    .footer .footer__copyright {
        grid-column: 1 / -1;
        grid-row: 10;
    }
}