/* =============================================================================
   CARD WRAPPER STYLES (GLOBAL - SHARED ACROSS COMPONENTS)
   ============================================================================= */

/*
 * These styles must stay global because .minicard-wrapper is used by:
 * 1. PlsBoardCardView - normal cards
 * 2. PlsBoardListView - drag placeholder
 *
 * All other card styles are scoped to PlsBoardCardView.razor.css
 */

/* Card wrapper. Radius matches the inner .minicard-content (4px) so the
   wrapper bounds don't carve a different-shaped silhouette around the card.
   Hover lift moved to .minicard-content (see PlsBoardCardView.razor.css)
   so the card's own border + shadow stay the source of truth. */
.minicard-wrapper {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: var(--card-gap);
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.minicard-wrapper:hover {
    text-decoration: none;
}

/* Selection uses the canvas seablue family (matches the .minicard-content ring). */
.minicard-wrapper.is-selected {
    outline: 2px solid #009FE3;
    outline-offset: 2px;
}

.minicard-wrapper.is-checked {
    opacity: 0.8;
}

.minicard-wrapper.multi-selection-active {
    cursor: pointer;
}

/* Multi-selection active width adjustments - from original minicard.styl lines 6-9 */
.minicard-wrapper.multi-selection-active .minicard {
    width: 159px;
}

.minicard-wrapper.multi-selection-active .minicard.relaxed-view {
    width: 266px;
}

.minicard-wrapper.multi-selection-active .minicard-content .minicard-status-overlay {
    left: 24px;
}

.minicard-wrapper.multi-selection-active::after {
    left: 31px;
}

.minicard-wrapper.multi-selection-active .minicard-color-stripe {
    left: 24px;
}

.minicard-wrapper.placeholder {
    background: #cccccc;
    border-radius: 4px;
}

.minicard-wrapper.board-background {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
}

.minicard-wrapper.relaxed-view {
    margin-bottom: var(--card-gap-relaxed);
}