/*
  Demo only: the login page's read-only fields and the welcome overlay (Login.razor in demo mode, AIG_DEMO_MODE=true).
  Plain CSS, not Tailwind: the container build does not regenerate wwwroot/css/site.css. Colours are the product's
  indigo (#6366f1 / #4f46e5 / #4338ca, the login page's info banner) and grays; the font is inherited from the page.

  Stacking: the backdrop is fixed at z-index 1000, the Login button is lifted to 1001 (spotlight) and the card sits at
  1002. None of the button's ancestors creates a stacking context, so its z-index competes with the backdrop directly.
*/

/* ---- Layout ------------------------------------------------------------------------------------------------- */

/* The product gives the photo panel 68% of the card from 768 px up, which leaves the form panel about 150 px wide at
   768 (the pre-filled CONTOSO\demo.viewer is clipped and the demo note wraps a word or two per line). In the demo the
   form keeps at least 22rem: the photo panel narrows between 768 and about 1100 px, and is unchanged above that.
   !important because the product sets the 68% inline. */
.aig-demo-photo {
    width: min(68%, calc(100% - 22rem)) !important;
}

/* ---- Read-only credential fields ---------------------------------------------------------------------------- */

.aig-demo-field {
    cursor: default;
}

.aig-demo-field:focus {
    outline: none;
    border-color: #a5b4fc;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.aig-demo-field__lock {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

/* Narrow phones: less side padding, so the whole CONTOSO\demo.viewer stays readable next to the lock. input.* outranks
   the product's Tailwind px-4 / pr-10 on the same element. */
@media (max-width: 379.98px) {
    input.aig-demo-field {
        padding-left: 0.75rem;
        padding-right: 2.25rem;
    }

    .aig-demo-field__lock {
        right: 0.7rem;
    }
}

.aig-demo-hint {
    margin: 0.4rem 0 0;
    font-size: 0.75rem;
    line-height: 1rem;
    color: #6b7280;
}

/* ---- Welcome overlay ------------------------------------------------------------------------------------------ */

.aig-welcome[hidden] {
    display: none !important;
}

.aig-welcome__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.62);
    animation: aig-welcome-fade 180ms ease-out both;
}

/* The Login button, lifted above the backdrop and still clickable. */
.aig-welcome-spotlight {
    position: relative;
    z-index: 1001;
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 3px rgba(99, 102, 241, 0.55);
    animation: aig-welcome-pulse 1.8s ease-out infinite;
}

.aig-welcome__card {
    position: fixed;
    z-index: 1002;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 380px;
    max-width: calc(100vw - 32px);
    padding: 1.4rem 1.5rem 1.35rem;
    border-radius: 1rem;
    /* The indigo accent along the top: a background band, clipped by the rounded corners (a border-top would curl). */
    background: linear-gradient(#6366f1, #6366f1) top / 100% 4px no-repeat, #ffffff;
    color: #111827;
    font-family: inherit;
    text-align: left;
    box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.45), 0 2px 6px rgba(15, 23, 42, 0.12);
    /* Placed by login-welcome.js before it is shown, so it never flashes in the wrong spot. */
    visibility: hidden;
}

.aig-welcome.is-ready .aig-welcome__card {
    visibility: visible;
    animation: aig-welcome-rise 200ms ease-out both;
}

.aig-welcome__badge {
    display: inline-block;
    margin-bottom: 0.65rem;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #4338ca;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.aig-welcome__title {
    margin: 0 1.75rem 0.5rem 0;
    font-size: 1.125rem;
    line-height: 1.4;
    font-weight: 700;
    color: #111827;
}

.aig-welcome__body {
    margin: 0 0 0.9rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #4b5563;
}

.aig-welcome__action {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    padding: 0.65rem 0.8rem;
    border-radius: 0.6rem;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #4338ca;
    font-size: 0.875rem;
    line-height: 1.45;
}

.aig-welcome__action svg {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.1rem;
}

.aig-welcome__action strong {
    font-weight: 700;
}

.aig-welcome__close {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
}

.aig-welcome__close:hover {
    background: #f3f4f6;
    color: #111827;
}

.aig-welcome__close:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 1px;
}

.aig-welcome__close svg {
    width: 1.1rem;
    height: 1.1rem;
}

/* The pointer toward the Login button: a rotated square on the card's edge, placed by login-welcome.js. */
.aig-welcome__arrow {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #ffffff;
    transform: rotate(45deg);
    pointer-events: none;
}

.aig-welcome__card[data-placement="left"] .aig-welcome__arrow {
    right: -7px;
    margin-top: -7px;
    box-shadow: 2px -2px 3px rgba(15, 23, 42, 0.08);
}

.aig-welcome__card[data-placement="right"] .aig-welcome__arrow {
    left: -7px;
    margin-top: -7px;
}

.aig-welcome__card[data-placement="below"] .aig-welcome__arrow {
    /* Sits on the indigo top band, so it takes the band's colour. */
    top: -7px;
    margin-left: -7px;
    background: #6366f1;
}

/* Phones (and short landscape windows): the card sits below the Login button (login-welcome.js), so it is kept short
   enough to fit there with the fields and the demo note still in view. The introduction line stays in the dialog's
   description for screen readers (aria-describedby reads hidden content). */
@media (max-width: 479.98px), (max-height: 500px) {
    .aig-welcome__card {
        padding: 1rem 1.1rem 1rem;
        border-radius: 0.85rem;
    }

    .aig-welcome__badge {
        margin-bottom: 0.45rem;
    }

    .aig-welcome__title {
        margin-bottom: 0.6rem;
        font-size: 1rem;
        line-height: 1.35;
    }

    .aig-welcome__body {
        display: none;
    }

    .aig-welcome__action {
        padding: 0.55rem 0.7rem;
        font-size: 0.8125rem;
        line-height: 1.4;
    }

    .aig-welcome__close {
        top: 0.5rem;
        right: 0.5rem;
    }
}

@keyframes aig-welcome-pulse {
    0% { box-shadow: 0 0 0 3px #ffffff, 0 0 0 3px rgba(99, 102, 241, 0.6); }
    70% { box-shadow: 0 0 0 3px #ffffff, 0 0 0 16px rgba(99, 102, 241, 0); }
    100% { box-shadow: 0 0 0 3px #ffffff, 0 0 0 16px rgba(99, 102, 241, 0); }
}

@keyframes aig-welcome-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes aig-welcome-rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .aig-welcome__backdrop,
    .aig-welcome.is-ready .aig-welcome__card {
        animation: none;
    }

    .aig-welcome-spotlight {
        animation: none;
        box-shadow: 0 0 0 3px #ffffff, 0 0 0 7px rgba(99, 102, 241, 0.65);
    }
}