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

/* ============================================================================
   Desktop Part-Row Grid Layout (1100px+)
   Activates at the same breakpoint where the schematic moves to the sidebar,
   so below 1100px the page is consistently mobile-stacked (toevoegen-buttons
   stay in their own row instead of overlapping product info).
   Fluid columns: clamp(72-100) | auto | 1fr | clamp(120-150)
   ============================================================================ */

@media (min-width: 1100px) {
    /* Main row container - CSS Grid */
    .part-row {
        display: grid;
        grid-template-columns: clamp(72px, 9vw, 100px) auto minmax(0, 1fr) clamp(120px, 14vw, 150px);
        align-items: center;
        gap: clamp(0.5rem, 1.2vw, 1rem);
        padding: clamp(0.625rem, 1.5vw, 1rem) clamp(0.625rem, 1.5vw, 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: #fff;
        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: -6px;
        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 only (row hover provides bg feedback) */
    .part-row__item--clickable {
        cursor: pointer;
        border-radius: 6px;
        padding: 0.375rem 0;
        margin: -0.375rem 0;
        transition: background-color 0.15s ease;
    }

    /* Single-item: no overlay — row-level hover is sufficient */
    .part-row:not(.part-row--multi) .part-row__item--clickable:hover {
        background-color: transparent;
    }

    /* 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;
    }

    /* Multi-item card hover: accent border only, no background change */
    .part-row--multi .part-row__item:hover {
        background: transparent;
        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;
    }

    /* Price + Supplier Logo stacked vertically (right-aligned) */
    .part-row__price-supplier {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 3px;
    }

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

    /* Supplier logo — consistent sizing for all logos */
    .part-row__supplier-logo-img {
        height: 18px;
        width: auto;
        max-width: 90px;
        object-fit: contain;
        display: block;
        opacity: 0.5;
        transition: opacity 0.15s, filter 0.15s;
    }

    .part-row__supplier-logo-img:hover {
        opacity: 0.85;
    }

    .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);
    }

    /* Koop button — flat accent, inline with text */
    .part-row__action-btn--details {
        background: var(--accent);
        color: #fff;
        border: none;
        padding: 4px 10px;
        width: auto;
        height: auto;
        font-size: 10px;
        font-weight: 600;
        gap: 3px;
        white-space: nowrap;
        text-decoration: none;
        transition: background 0.15s, transform 0.15s;
    }

    .part-row__action-btn--details:hover {
        background: var(--accent-hover);
        color: #fff;
        transform: translateY(-1px);
    }

    .part-row__action-btn-text {
        display: inline;
    }

    .part-row__action-btn--remove:hover {
        border-color: var(--error);
        color: var(--error);
        background: rgba(var(--error-rgb), 0.06);
    }

    .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 {
        margin-left: auto;
        flex-direction: column;
        align-items: flex-end;
        gap: 3px;
    }

    /* 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;
    }
}