/* ==========================================================================
   Display Card — .av-display-card + preview, meta, actions, overflow menu
   ========================================================================== */
.av-display-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    position: relative;
}

.av-display-card:hover {
    border-color: var(--ink-2);
    box-shadow: var(--shadow-sm);
}

.av-display-card.is-selected {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 55%, transparent);
}

.av-display-card-select {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 2;
    width: var(--touch-target);
    height: var(--touch-target);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: oklch(0.18 0.012 255 / 0.55);
    backdrop-filter: blur(8px);
    cursor: pointer;
}

.av-display-card-select:hover,
.av-display-card-select:focus-within {
    background: oklch(0.18 0.012 255 / 0.72);
}

.av-card-check {
    width: 20px;
    height: 20px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.av-display-card-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Empty preview slot: drops the 16:9 footprint to a thin strip so a list of
   idle/offline displays stays scannable. Keeps the favorite pin pinned to the
   top-right corner of the card body via the negative-margin override below. */
.av-display-card-preview--empty {
    aspect-ratio: auto;
    height: 4px;
    /* The 48px favourite button is positioned inside this strip, so the strip
       must not clip it — .av-display-card-preview sets overflow:hidden to trim
       the preview iframe, and there is no iframe in the empty state. */
    overflow: visible;
    background: linear-gradient(90deg,
        var(--border-light, #e5e7eb) 0%,
        var(--bg-secondary, #f9fafb) 50%,
        var(--border-light, #e5e7eb) 100%);
    border-bottom: none;
}
.av-display-card-preview--empty .av-favorite-pin {
    top: 8px;
    right: 8px;
}

/* When a display has nothing to preview the thumbnail collapses to a 4px
   strip, but the two controls that were designed to sit ON that thumbnail —
   the selection checkbox at its top-left and the favourite pin at its
   top-right — are positioned against the card and stay 48px tall. With the
   thumbnail gone they land on the name row: measured, the checkbox covered
   the first characters of the display name and the pin covered the licence
   badge. Reserve their gutters so the row starts and ends clear of them. */
.av-display-card:has(.av-display-card-preview--empty) .av-display-card-name {
    padding-right: calc(var(--touch-target) + var(--space-sm));
}

.av-display-card:has(.av-display-card-preview--empty):has(.av-display-card-select) .av-display-card-name {
    padding-left: calc(var(--touch-target) + var(--space-sm));
}

/* Base preview iframe (shared between card and mini-preview) */
.av-preview-iframe {
    border: none;
    pointer-events: none;
}

.av-display-card-preview .av-preview-iframe {
    width: 100%;
    height: 100%;
}

/* Clickable overlay turning the preview thumbnail into an "open fullscreen" button.
   Sits above the pointer-events:none iframe but below the favorite pin (z-index:1). */
.av-display-card-preview-open {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: zoom-in;
    z-index: 0;
}

.av-display-card-preview-open:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

/* Template preview (16:9 thumbnail in template cards) */
.av-template-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    overflow: hidden;
    background: var(--bg-secondary);
}

.av-template-preview .av-preview-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.av-template-preview--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--font-xs);
    padding: var(--space-md);
    text-align: center;
}

.av-display-card-body {
    padding: var(--space-md);
}

.av-display-card-name {
    font-size: var(--font-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    line-height: var(--line-height-tight);
}

/* Card name acts as a primary affordance to the display detail page; styled
   as plain text by default, underline only on hover/focus so the row stays
   visually calm but discoverable. Mirrors .av-display-row-name-link. */
.av-display-card-name-link {
    color: inherit;
    text-decoration: none;
    border-radius: 4px;
}
.av-display-card-name-link:hover,
.av-display-card-name-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.av-display-card-name-link:focus-visible {
    outline: 2px solid var(--accent-primary, #2563eb);
    outline-offset: 2px;
}

.av-display-card-meta {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: var(--space-xs);
    overflow-wrap: anywhere;
}

.av-display-card-health {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: var(--font-xs);
    line-height: var(--line-height-base);
}

.av-display-card-health-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex: 0 0 auto;
    margin-top: 0.35em;
    background: var(--text-muted);
}

.av-display-card-health--online {
    border-color: var(--border-success);
}

.av-display-card-health--online .av-display-card-health-dot {
    background: var(--success);
}

.av-display-card-health--degraded {
    border-color: var(--border-warning);
}

.av-display-card-health--degraded .av-display-card-health-dot {
    background: var(--warning);
}

.av-display-card-health--offline {
    border-color: var(--border-light);
}

.av-display-card-status-copy {
    min-width: 0;
    overflow-wrap: anywhere;
}

.av-display-card-diagnostics {
    margin-top: var(--space-sm);
    border-top: 1px solid var(--border-light);
    padding-top: var(--space-sm);
}

.av-display-card-diagnostics summary {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-semibold);
}

.av-display-card-diagnostics summary:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

.av-display-card-diagnostic-grid {
    display: grid;
    gap: var(--space-xs);
    margin: var(--space-sm) 0 0;
}

.av-display-card-diagnostic-row {
    display: grid;
    grid-template-columns: minmax(88px, max-content) minmax(0, 1fr);
    gap: var(--space-sm);
    align-items: start;
    font-size: var(--font-xs);
}

.av-display-card-diagnostic-row dt {
    color: var(--text-muted);
    font-weight: var(--font-weight-semibold);
}

.av-display-card-diagnostic-row dd {
    margin: 0;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.av-display-card-actions {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md) var(--space-md);
    align-items: stretch;
    flex-wrap: wrap;
}

.av-display-card-actions .av-btn {
    min-height: 38px;
    flex: 1 1 auto;
    justify-content: center;
}

.av-display-card-overflow {
    position: relative;
}

.av-display-card-overflow-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    min-width: 190px;
    padding: 6px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
    display: none;
}

.av-display-card-overflow.is-open .av-display-card-overflow-menu {
    display: grid;
    gap: 2px;
}

.av-display-card-overflow-item {
    width: 100%;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    font-size: var(--font-xs);
    padding: 8px var(--space-sm);
    cursor: pointer;
}

.av-display-card-overflow-item:hover:not(:disabled) {
    background: var(--bg-hover-subtle);
}

.av-display-card-overflow-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Favorite pin */
.av-favorite-pin {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    width: var(--touch-target);
    height: var(--touch-target);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Dark scrim so the pin stays legible over any preview. The glyph on
       top has to be light to match: --text-muted measured 1.66:1 here. */
    background: oklch(0.18 0.012 255 / 0.52);
    backdrop-filter: blur(8px);
    border: none;
    border-radius: var(--radius-full);
    color: oklch(0.93 0.004 255);
    cursor: pointer;
    transition: color var(--transition-base), background-color var(--transition-base);
    font-size: 1rem;
    z-index: 1;
}

.av-favorite-pin:hover,
.av-favorite-pin.is-active {
    color: var(--accent-secondary);
    background: oklch(0.72 0.14 70 / 0.14);
}

/* Hero display card (single display user) */
.av-display-card--hero {
    border: 1px solid var(--border);
}

.av-display-card--hero .av-display-card-preview {
    aspect-ratio: 16 / 10;
}

/* Display card grid */
.av-display-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 480px) {
    .av-display-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .av-display-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* Grid inside a status-group section inherits the same responsive columns.
   Cards wrap naturally at all breakpoints, so nothing here may exceed the
   column width: that is what width/min-width are for.

   This deliberately does NOT clip. `overflow: hidden` was here to stop
   horizontal overflow, but it clips both axes, and the card's own overflow
   menu opens downwards out of the grid box. On the last row that cut the menu
   off entirely: measured 281 px of it below the grid's bottom edge, with its
   first entry not hit-testable at all. So "Mehr" opened a menu nobody could
   reach. min-width:0 is the part that actually prevents a grid item from
   pushing its track wider than the container. */
.av-status-group .av-display-grid {
    width: 100%;
    min-width: 0;
}