/* ============================================================================
   View Packages page
   ----------------------------------------------------------------------------
   Wide package comparison matrix, column sizing, pinned desktop identifiers,
   package row content, custom scrollbar, and responsive behavior.

   Source: Pasted text(20260903-154552).txt:879-1214.
   ============================================================================ */

.store-package-table--matrix {
    --package-actions-width: 9rem;
    --package-preview-width: 6.5rem;
    --package-name-width: 12.5rem;
    --package-sticky-surface: color-mix( in srgb, var(--store-border) 36%, var(--store-white) );
}

    .store-package-table--matrix .mud-table-root {
        min-width: 176rem;
        table-layout: fixed;
    }

    .store-package-table--matrix .mud-table-cell {
        box-sizing: border-box;
    }

    .store-package-table--matrix .mud-table-container {
        overflow-x: auto !important;
        overflow-y: auto !important;
        overscroll-behavior-x: contain;
        scroll-padding-inline-start: calc( var(--package-actions-width) + var(--package-preview-width) + var(--package-name-width) + 1rem );
        scrollbar-color: var(--store-border-strong) var(--store-surface-subtle);
        scrollbar-gutter: stable;
        scrollbar-width: auto;
    }

        .store-package-table--matrix .mud-table-container::-webkit-scrollbar {
            width: 0.8rem;
            height: 0.8rem;
        }

        .store-package-table--matrix .mud-table-container::-webkit-scrollbar-track {
            background: var(--store-surface-subtle);
        }

        .store-package-table--matrix .mud-table-container::-webkit-scrollbar-thumb {
            background: var(--store-border-strong);
            border: 0.2rem solid var(--store-surface-subtle);
            border-radius: 999px;
        }

    .store-package-table--matrix .mud-table-head .mud-table-cell {
        position: sticky;
        top: 0;
        z-index: 8;
        height: 4rem;
        padding: 0.65rem 0.7rem;
        color: var(--store-text-secondary);
        font-size: 0.7rem;
        font-weight: 800;
        line-height: 1.25;
        text-align: center;
        white-space: normal;
        vertical-align: middle;
        background: var(--store-surface-subtle);
        background-clip: padding-box;
        border-bottom: 1px solid var(--store-border-strong);
        box-shadow: none;
    }

    .store-package-table--matrix .mud-table-body .mud-table-cell {
        padding: 0.7rem;
        vertical-align: middle;
    }

    .store-package-table--matrix .store-package-actions-column, .store-package-table--matrix .store-package-actions-cell {
        width: var(--package-actions-width);
        min-width: var(--package-actions-width);
        max-width: var(--package-actions-width);
    }

    .store-package-table--matrix .store-package-preview-column, .store-package-table--matrix .store-package-preview-cell {
        width: var(--package-preview-width);
        min-width: var(--package-preview-width);
        max-width: var(--package-preview-width);
        text-align: center;
    }

    .store-package-table--matrix .store-package-name-column, .store-package-table--matrix .store-package-name-cell {
        width: var(--package-name-width);
        min-width: var(--package-name-width);
        max-width: var(--package-name-width);
        text-align: left !important;
    }

    .store-package-table--matrix .store-package-description-column, .store-package-table--matrix .store-package-description-cell {
        width: 17rem;
        min-width: 17rem;
        max-width: 17rem;
        text-align: left !important;
    }

    .store-package-table--matrix .store-package-flag-column, .store-package-table--matrix .store-package-flag-cell {
        width: 6.75rem;
        min-width: 6.75rem;
        max-width: 6.75rem;
        text-align: center;
    }

    .store-package-table--matrix .store-package-option-column, .store-package-table--matrix .store-package-option-cell {
        width: 9rem;
        min-width: 9rem;
        max-width: 9rem;
        text-align: center;
    }

    .store-package-table--matrix .store-package-usage-column, .store-package-table--matrix .store-package-usage-cell {
        width: 7.5rem;
        min-width: 7.5rem;
        max-width: 7.5rem;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

        .store-package-table--matrix .store-package-usage-column .mud-table-sort-label {
            justify-content: flex-end;
            width: 100%;
        }

@media screen and (min-width: 960px) {
    .store-package-table--matrix .store-package-sticky {
        position: sticky;
        background-clip: padding-box;
        box-shadow: none !important;
    }

    .store-package-table--matrix thead .store-package-sticky {
        position: sticky !important;
        top: 0 !important;
    }

    .store-package-table--matrix thead .store-package-sticky--actions {
        left: 0 !important;
        z-index: 16 !important;
        background: var(--package-sticky-surface);
    }

    .store-package-table--matrix .mud-table-body .store-package-sticky--actions {
        left: 0;
        z-index: 6;
        background: var(--package-sticky-surface);
    }

    .store-package-table--matrix thead .store-package-sticky--preview {
        left: var(--package-actions-width) !important;
        z-index: 15 !important;
        background: var(--package-sticky-surface);
    }

    .store-package-table--matrix .mud-table-body .store-package-sticky--preview {
        left: var(--package-actions-width);
        z-index: 5;
        background: var(--package-sticky-surface);
    }

    .store-package-table--matrix thead .store-package-sticky--name {
        left: calc( var(--package-actions-width) + var(--package-preview-width) ) !important;
        z-index: 14 !important;
        background: var(--package-sticky-surface);
        border-right: 2px solid var(--store-border-strong);
    }

    .store-package-table--matrix .mud-table-body .store-package-sticky--name {
        left: calc( var(--package-actions-width) + var(--package-preview-width) );
        z-index: 4;
        background: var(--package-sticky-surface);
        border-right: 2px solid var(--store-border-strong);
    }

    .store-package-table--matrix .store-package-actions-cell:focus-within {
        z-index: 10;
    }
}

.store-package-table-actions {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

    .store-package-table-actions .store-package-table-action {
        width: 100%;
        min-width: 0;
        min-height: 2.15rem;
        padding: 0.4rem 0.55rem;
        font-size: 0.72rem;
    }

.store-package-description {
    display: -webkit-box;
    overflow: hidden;
    color: var(--store-text-secondary);
    font-size: 0.78rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.store-package-readonly-check {
    display: inline-flex;
    margin: 0;
    cursor: default;
}

    .store-package-readonly-check.mud-disabled, .store-package-readonly-check .mud-disabled {
        opacity: 1 !important;
    }

.store-package-flag-cell .mud-input-control, .store-package-option-cell .mud-input-control {
    margin: 0;
}

.store-package-flag-cell .mud-checkbox, .store-package-option-cell .mud-checkbox {
    padding: 0.3rem;
}

.store-package-option-value {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    min-height: 3rem;
}

.store-package-option-price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.55rem;
    padding: 0.2rem 0.4rem;
    color: var(--store-main-color-dark);
    font-size: 0.68rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    background: color-mix( in srgb, var(--store-main-color) 8%, var(--store-white) );
    border: 1px solid color-mix( in srgb, var(--store-main-color) 22%, var(--store-border) );
    border-radius: 999px;
}

@media (hover: hover) and (pointer: fine) {
    .store-package-table--matrix .mud-table-container::-webkit-scrollbar-thumb:hover {
        background: var(--store-text-muted);
    }

    .store-package-table--matrix .mud-table-row:hover > .store-package-sticky {
        background: var(--store-main-color-pale);
    }
}

@media screen and (max-width: 959.98px) {
    .store-package-table--matrix .mud-table-body .store-package-sticky {
        position: static;
    }

    .store-package-table--matrix .mud-table-head .store-package-sticky {
        position: sticky;
        top: 0;
        left: auto;
    }

    .store-package-table--matrix .mud-table-container {
        scroll-padding-inline-start: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .store-package-table--matrix *, .store-package-table--matrix *::before, .store-package-table--matrix *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}