/* Shared auth/page surfaces, panels, and surface primitives. */

/* Shared app components, Bootstrap-compatible primitives, forms, panels, and common controls. */

.app-page-auth {
    min-height: calc(100vh - 5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0.75rem;
}

.app-auth-card,
.app-panel {
    width: 100%;
    border: 1px solid var(--app-border);
    border-radius: 0.9rem;
    background: linear-gradient(180deg, var(--app-surface-2), var(--app-surface));
    box-shadow: 0 0.7rem 1.7rem var(--app-shadow-md-raw);
}

.app-auth-card {
    max-width: 26rem;
}

.app-surface {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-raised);
}

.bepis-pointer-clone-shadow {
    pointer-events: none;
    opacity: 0.9;
    border: 2px solid var(--app-info);
    border-radius: var(--app-radius-sm);
    background: color-mix(in srgb, var(--app-info) 28%, var(--app-surface-2));
    box-shadow: 0 0.75rem 1.5rem var(--app-shadow-md-raw);
    transform-origin: top left;
}

.bepis-pointer-clone-shadow-copy {
    opacity: 0.96;
    border-color: var(--app-success-border);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-success-soft) 62%, var(--app-surface-2)),
        color-mix(in srgb, var(--app-success-soft) 48%, var(--app-surface))
    );
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--app-success-border) 42%, transparent),
        0 0.85rem 1.65rem var(--app-shadow-md-raw);
}

.bepis-pointer-clone-shadow-copy::after {
    content: "Copy";
    position: absolute;
    right: 0.35rem;
    bottom: 0.3rem;
    padding: 0.12rem 0.38rem;
    border-radius: 999px;
    background: var(--bs-success);
    color: var(--app-panel-bg);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.bepis-dropzone-highlight,
.roster-grid .bepis-dropzone-highlight {
    z-index: 5;
    background: color-mix(in srgb, var(--app-surface-2) 76%, var(--app-accent) 24%);
    box-shadow: inset 0 0 0 2px var(--app-accent), 0 0.45rem 0.9rem var(--app-shadow-md-raw);
}

.roster-grid .roster-shift-create-unit.bepis-dropzone-highlight .roster-shift-create-plus-overlay {
    opacity: 1;
}