/* ==========================================================================
   Product Selector - Compat-Empty Pane
   ----------------------------------------------------------------------------
   Centered panel that explains why a product fetch returned 0 results. Lives
   inside .product-grid-container, replaces the bland "Geen producten gevonden"
   state when the server attached meta.compat_diagnosis to the response.

   BEM block:  .compat-empty
   Elements:   __inner, __icon-wrap, __icon, __title, __text, __components,
               __components-item, __divider, __divider-icon, __divider-text,
               __card, __card-head, __card-label, __card-name, __card-reason,
               __card-warn, __card-replace, __actions, __btn, __hint

   Theme tokens live in /themes/flavor/assets/css/theme-vars.css
   (--warning, --warning-rgb, --text-*, --bg-*, --border-*, --accent-*, --radius-*).
   ========================================================================== */

.compat-empty {
    /* Spans the grid container; centered child inside. */
    width: 100%;
    max-width: 560px;
    margin: clamp(1rem, 3vw, 2rem) auto;
    padding: 0;
}

.compat-empty__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1rem, 3vw, 1.5rem);
    background: var(--bg-modal);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* Round warning icon at the top of the pane */
.compat-empty__icon-wrap {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--warning-rgb), 0.12);
    color: var(--warning);
    margin-bottom: 0.25rem;
    flex-shrink: 0;
}

.compat-empty__icon {
    display: block;
}

.compat-empty__title {
    font-size: clamp(1.0625rem, 2.5vw + 0.05rem, 1.25rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    margin: 0;
    /* Override the default browser/H1 margins so the gap (above) controls spacing */
    letter-spacing: -0.005em;
}

.compat-empty__text {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
    max-width: 46ch;
}

/* ----- Component cards ----- */

.compat-empty__components {
    list-style: none;
    margin: 0.5rem 0 0 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
}

.compat-empty__components-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.compat-empty__card {
    width: 100%;
    text-align: left;
    padding: 0.875rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    /* Warning-toned accent on the left to signal "this is the conflict". */
    border-left: 3px solid rgba(var(--warning-rgb), 0.7);
    border-radius: var(--radius-md, 8px);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "head    head"
        "name    name"
        "reason  reason"
        "replace replace";
    row-gap: 0.375rem;
    column-gap: 0.75rem;
}

.compat-empty__card-head {
    grid-area: head;
}

.compat-empty__card-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    line-height: 1.2;
}

.compat-empty__card-name {
    grid-area: name;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
    /* Long product names like "ASRock H510 Pro BTC+" wrap, not overflow. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.compat-empty__card-reason {
    grid-area: reason;
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.compat-empty__card-warn {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--warning);
}

.compat-empty__card-replace {
    grid-area: replace;
    justify-self: end;
    margin-top: 0.375rem;
    padding: 0.4375rem 0.875rem;
    min-height: 36px;
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.compat-empty__card-replace:hover {
    background: var(--accent);
    color: var(--text-on-fill);
}

.compat-empty__card-replace:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ----- Divider between two cards (the "botst met" connector) ----- */

.compat-empty__divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem 0 0.25rem;
    color: var(--warning);
    opacity: 0.85;
}

.compat-empty__divider-icon {
    display: block;
}

.compat-empty__divider-text {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--text-muted);
}

/* Two-component layout: cards side-by-side on wider screens. The grid is
   collapsed to one column on phones — see the @media below. */
.compat-empty__components--duo {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 0.5rem;
}

.compat-empty__components--duo {
    gap: 1.75rem;
}

.compat-empty__components--duo .compat-empty__components-item {
    position: relative;
    flex: 1 1 240px;
    min-width: 0;
    max-width: 360px;
}

/* Equal-height cards side by side, with both "Vervangen" buttons on the bottom line. */
.compat-empty__components--duo .compat-empty__card {
    flex: 1 1 auto;
    grid-template-rows: auto auto auto 1fr;
}

.compat-empty__components--duo .compat-empty__card-replace {
    align-self: end;
}

/* Wide screens: the connector sits as a round badge in the gap between the two
   cards, vertically centred, so both cards start on the same line. */
.compat-empty__components--duo .compat-empty__divider {
    position: absolute;
    top: 50%;
    left: -0.875rem;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 2rem;
    height: 2rem;
    padding: 0;
    justify-content: center;
    border: 1px solid rgba(var(--warning-rgb), 0.35);
    border-radius: 50%;
    background: var(--bg-modal);
}

.compat-empty__components--duo .compat-empty__divider-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ----- Action buttons ----- */

.compat-empty__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    width: 100%;
}

.compat-empty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.625rem 1.125rem;
    min-height: 44px;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius-sm, 4px);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
    font-family: inherit;
    line-height: 1.2;
}

.compat-empty__btn--primary {
    background: var(--warning);
    color: var(--on-brand);
}

.compat-empty__btn--primary:hover {
    background: var(--signal-caution);
    filter: brightness(1.05);
}

.compat-empty__btn--primary:active {
    transform: translateY(1px);
}

.compat-empty__btn--primary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.compat-empty__hint {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-align: center;
}

/* ==========================================================================
   Mobile (≤ 640px)
   Tighter padding, stack the two cards, full-width primary button, full-width
   "Vervangen" button under the card text so the row meets 44px touch targets.
   ========================================================================== */

@media (max-width: 640px) {
    .compat-empty {
        margin: 0.75rem auto;
        max-width: 100%;
    }

    .compat-empty__inner {
        padding: 1rem 0.875rem;
        gap: 0.625rem;
    }

    .compat-empty__icon-wrap {
        width: 48px;
        height: 48px;
    }

    .compat-empty__text {
        font-size: 0.875rem;
    }

    .compat-empty__components {
        flex-direction: column;
        gap: 0.5rem;
    }

    .compat-empty__components--duo {
        flex-direction: column;
    }

    .compat-empty__components--duo .compat-empty__components-item {
        flex: 1 1 auto;
        max-width: 100%;
    }

    .compat-empty__components--duo {
        gap: 0.5rem;
    }

    /* Move the divider back to a vertical separator between stacked cards. */
    .compat-empty__components--duo .compat-empty__divider {
        position: static;
        transform: none;
        width: auto;
        height: auto;
        align-self: center;
        flex-direction: column;
        padding: 0.125rem 0 0.25rem;
        border: 0;
        border-radius: 0;
        background: none;
    }

    .compat-empty__components--duo .compat-empty__divider-text {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }

    .compat-empty__card {
        padding: 0.75rem 0.875rem;
        row-gap: 0.5rem;
    }

    .compat-empty__card-name {
        font-size: 0.875rem;
    }

    .compat-empty__card-reason {
        font-size: 0.8125rem;
    }

    .compat-empty__card-replace {
        justify-self: stretch;
        width: 100%;
        min-height: 44px;
        padding: 0.625rem 0.875rem;
    }

    .compat-empty__btn--primary {
        width: 100%;
        padding: 0.75rem 1rem;
        min-height: 44px;
    }
}