.pfm-card {
    margin-bottom: 10px;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 20%);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 20%);
}


.pfm-card.hover {
    cursor: pointer;
    outline: none;
    transition: box-shadow 0.5s;
}

.pfm-card.hover:hover,
.pfm-card.hover:focus-visible {
    box-shadow: 0 15px 30px rgb(0 0 0 / 45%);
}

/* ─────────────────────────────────────────────────────────────────────────
   Shared mobile "flat" layout for detail cards used inside ListDetailView.
   Desktop is untouched — cards keep their rounded chrome + outer scroll.
   On mobile (≤959px):
     - .detail-card-root fills the preview-window (which already ends above
       MainLayout's fixed bottom MudAppBar — see ListDetailView.razor.css).
     - Header + shell go edge-to-edge (no margin/radius).
     - .detail-card-tabs is the single scroll region.
     - .detail-card-actions stays pinned to the bottom of the shell.
   Apply by adding the classes to existing markup; no structural rewrite needed
   on desktop.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 959px) {
    /* Explicit viewport calc — not height:100% — because .preview-card uses
       min-height:100%, so a percentage height on the child resolves to auto
       and the flex column stops constraining its children. The calc subtracts
       MainLayout's fixed bottom MudAppBar (48px + safe-area) directly. */
    .detail-card-root {
        max-height: none !important;
        height: calc(100dvh - 48px - env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .detail-card-header {
        margin: 0 !important;
        border-radius: 0 !important;
        flex-shrink: 0;
    }

    .detail-card-shell {
        margin: 0 !important;
        border-radius: 0 !important;
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .detail-card-tabs {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }

    .detail-card-actions {
        flex-shrink: 0;
        background: var(--mud-palette-surface);
    }
}