/* ============================================
   DESKTOP ENHANCEMENTS: Clean Card Styling
   ============================================
   Professional, clean desktop experience.
   Mobile stays unchanged.
*/

/* ============================================================================
   Desktop Part-Row Grid Layout (1024px+)
   Fixed columns: 100px | auto | 1fr | 150px
   Column 1: Label (100px)
   Column 2: Add area with slot indicator + button (auto width)
   Column 3: Items/product info (flex-grow)
   Column 4: Price & actions (150px)
   ============================================================================ */

@media (min-width: 1024px) {
    /* Main row container - CSS Grid */
    .part-row {
        display: grid;
        grid-template-columns: 100px auto 1fr 150px;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border);
        min-height: 60px;
    }

    .part-row:last-child {
        border-bottom: none;
    }

    .part-row:hover {
        background-color: var(--bg-hover);
    }

    /* Column 1: Category label (100px, left aligned) */
    .part-row__header {
        grid-column: 1;
        display: flex;
        align-items: center;
        padding: 0;
        background: transparent;
        border-bottom: none;
    }

    .part-row__type {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        white-space: nowrap;
    }

    .part-row__icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .part-row__label {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--text-secondary);
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Column 2: Add area wrapper (slot indicator + button) */
    .part-row__add-area {
        grid-column: 2;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        white-space: nowrap;
    }

    /* Slot indicator styling */
    .part-row__slot-indicator {
        font-size: 0.75rem;
        color: var(--text-muted);
        font-weight: 500;
    }

    /* Hide slot indicator by default (only show for multi items) */
    .part-row:not(.part-row--multi) .part-row__slot-indicator {
        display: none;
    }

    /* Hide old slot indicator in add-area - slot badge now in items area */
    .part-row__add-area .part-row__slot-indicator {
        display: none;
    }

    /* Compact button style when in add-area */
    .part-row__add-btn--compact {
        padding: 0.25rem;
        min-width: auto;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .part-row__add-btn--compact .part-row__add-text {
        display: none;
    }

    /* Normal button style */
    .part-row__add-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
        background: var(--accent);
        color: #000;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.15s ease;
        white-space: nowrap;
    }

    .part-row__add-btn:hover {
        background: var(--accent-hover);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .part-row__add-btn svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    /* When add area is hidden or empty, items can expand */
    .part-row__add-area[style*="display: none"] ~ .part-row__items,
    .part-row__add-area:empty ~ .part-row__items {
        grid-column: 2 / 4;
    }

    /* Column 3: Product info / Empty state (flex-grow) */
    .part-row__items {
        grid-column: 3;
        min-width: 0;
        position: relative;
    }

    /* Slot badge - top right corner of items area */
    .part-row__slot-badge {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 0.625rem;
        font-weight: 500;
        color: var(--text-muted);
        background: transparent;
        border: 1px solid var(--border);
        padding: 0.125rem 0.375rem;
        border-radius: 3px;
        white-space: nowrap;
        z-index: 1;
    }

    /* For multi-item rows, add some top padding to make room for badge */
    .part-row--multi .part-row__items {
        padding-top: 0.25rem;
    }

    /* Empty state - "Niet geselecteerd" */
    .part-row__empty {
        color: var(--text-muted);
        font-style: italic;
        font-size: 0.875rem;
        padding: 0;
    }

    /* Single item layout */
    .part-row__item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0;
        border-bottom: none;
        background: transparent;
    }

    /* Clickable item - cursor pointer and hover effect */
    .part-row__item--clickable {
        cursor: pointer;
        border-radius: 6px;
        padding: 0.375rem 0.5rem;
        margin: -0.375rem -0.5rem;
        transition: background-color 0.15s ease, box-shadow 0.15s ease;
    }

    .part-row__item--clickable:hover {
        background-color: var(--bg-secondary);
        box-shadow: 0 0 0 1px var(--accent);
    }

    /* Multi-item: stack vertically */
    .part-row--multi .part-row__items-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .part-row--multi .part-row__item {
        padding: 0.5rem 0.75rem;
        background: transparent;
        border: 1px solid var(--border);
        border-radius: 6px;
    }

    .part-row--multi .part-row__item:hover {
        background: var(--bg-secondary);
        border-color: var(--accent);
    }

    /* Thumbnail */
    .part-row__thumb-container {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
    }

    .part-row__thumb {
        width: 40px;
        height: 40px;
        object-fit: contain;
        border-radius: 4px;
        background: transparent;
    }

    /* Product info */
    .part-row__product-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }

    .part-row__product-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .part-row__quantity {
        font-weight: 600;
        color: var(--accent);
        font-size: 0.875rem;
    }

    .part-row__product-name {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .part-row__product-specs {
        font-size: 0.75rem;
        color: var(--text-muted);
    }

    /* For single-item types: when add area is hidden, shift items+price left */
    .part-row:not(.part-row--multi) .part-row__add-area[style*="display: none"] ~ .part-row__items {
        grid-column: 2 / 4;
    }

    .part-row:not(.part-row--multi) .part-row__add-area[style*="display: none"] ~ .part-row__price-column {
        grid-column: 4;
    }

    /* Column 4: Price & Actions for single-item types (150px, right aligned) */
    .part-row__price-column {
        grid-column: 4;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .part-row__price-column-content {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .part-row__price-column .part-row__price-container {
        display: flex;
        align-items: center;
    }

    .part-row__price-column .part-row__price {
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--accent);
        white-space: nowrap;
    }

    .part-row__price-column .part-row__actions {
        display: flex;
        gap: 0.25rem;
    }

    /* Column 4: Price & Actions (150px, right aligned) */
    .part-row__price-container {
        grid-column: 4;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.75rem;
    }

    .part-row__price {
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--accent);
        white-space: nowrap;
    }

    .part-row__stock {
        display: none; /* Hide on desktop to save space */
    }

    .part-row__actions {
        display: flex;
        gap: 0.25rem;
    }

    .part-row__action-btn {
        width: 28px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid var(--border);
        border-radius: 4px;
        color: var(--text-muted);
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .part-row__action-btn:hover {
        background: var(--bg-tertiary);
        border-color: var(--border-light);
        color: var(--text-primary);
    }

    .part-row__action-btn--remove:hover {
        border-color: var(--error);
        color: var(--error);
    }

    .part-row__action-btn svg {
        width: 14px;
        height: 14px;
    }

    /* For multi-item rows: price/actions inside item, not in grid column 4 */
    .part-row--multi .part-row__price-container {
        grid-column: 3;
        justify-self: end;
        margin-left: auto;
    }

    /* Hide the grid column 4 placeholder for multi rows */
    .part-row--multi > .part-row__price-container:last-child {
        display: none;
    }

    /* Multi-item types: only span columns 3-4 when filled */
    .part-row--multi .part-row__items {
        grid-column: 3;
    }

    .part-row--multi.part-row--filled .part-row__items {
        grid-column: 3 / 5;
    }

    /* Hide the price column for multi-item types */
    .part-row--multi .part-row__price-column {
        display: none;
    }
}