/* Responsive list views.

   Radzen's DataGrid lays columns out from a fixed <colgroup>, so hiding a column with
   CSS `display:none` still reserves its width — leaving blank gaps, a horizontal
   scrollbar, and (because the flexible link column gets squeezed to ~0) an unusable grid
   on phones. So instead of hiding columns, list pages render the real grid for desktop and
   a stacked, tappable card list for narrow screens, toggled by these utilities:

     .cm-only-desktop   the RadzenDataGrid wrapper — hidden at phone widths
     .cm-only-mobile    the card list — hidden above the phone breakpoint

   The card list (.cm-rec-*) is a generic "one record per card" pattern: the whole card is
   a link to the row's detail page, with a title, a meta line, and a row of badges/tags. */

/* The card list carries .cm-rec-list (display:flex), which by source order would override a
   plain `.cm-only-mobile { display:none }` and leak the cards onto desktop (showing the grid
   AND the cards). So hide the off-breakpoint tree with a media query + !important, and on the
   active breakpoint force nothing — the element's own layout class (flex / block) applies. */
@media (min-width: 641px) {
    .cm-only-mobile {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .cm-only-desktop {
        display: none !important;
    }
}

/* --- Mobile record cards --- */

.cm-rec-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cm-rec-card {
    display: block;
    text-decoration: none;
    color: var(--fg);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
}

.cm-rec-card:hover,
.cm-rec-card:focus-visible {
    text-decoration: none;
    color: var(--fg);
    border-color: var(--hairline-strong);
    outline: none;
}

.cm-rec-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cm-rec-card__title {
    font-weight: var(--weight-semibold);
    font-size: 1rem;
    color: var(--fg);
    overflow-wrap: anywhere;
}

a.cm-rec-card__title {
    text-decoration: none;
}

a.cm-rec-card__title:hover,
a.cm-rec-card__title:focus-visible {
    color: var(--accent-text);
    text-decoration: none;
    outline: none;
}

.cm-rec-card__chev {
    flex: 0 0 auto;
    color: var(--fg-muted);
    font-size: 1.25rem;
}

.cm-rec-card__meta {
    margin-top: 0.2rem;
    color: var(--fg-muted);
    font-size: 0.85rem;
}

.cm-rec-card__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.55rem;
}

.cm-rec-card__tag {
    color: var(--fg-muted);
    font-size: 0.8rem;
}

.cm-rec-card__secondary {
    color: var(--fg-muted);
    font-size: 0.85rem;
}

/* Action buttons on a card. Full-size, wrapping row — far safer to tap than the desktop
   grid's small icon buttons. */
.cm-rec-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.7rem;
}

.cm-rec-card__actions .rz-button {
    flex: 0 0 auto;
}