/* ============================================================================
   Shared media table extensions
   ----------------------------------------------------------------------------
   Thumbnail, code, description, status, numeric, usage-count, destructive-
   action, compact-table, and responsive media-row styles.

   Source: Pasted text(20260903-154552).txt:583-870.
   ============================================================================ */

@media screen and (min-width: 960px) {
    .store-data-table--media .mud-table-root {
        min-width: 72rem;
    }
}

.store-data-table--media .mud-table-head .mud-table-cell {
    vertical-align: middle;
}

.store-data-table--media .mud-table-body .mud-table-cell {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    vertical-align: middle;
}

.store-data-media-column, .store-data-media-cell {
    max-width: 9rem;
    width: auto;
}

.store-data-media {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    max-width: 9rem;
}

.store-data-thumbnail {
    display: flex;
    flex: 0 0 3.5rem;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4.375rem;
    overflow: hidden;
    background: var(--store-surface-subtle);
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius-sm);
}


.store-data-thumbnail-image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    object-position: center;
}

.store-data-thumbnail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--store-text-muted);
    background: color-mix( in srgb, var(--store-border) 35%, var(--store-white) );
}

.store-data-media {
    flex: 1 1 auto;
    min-width: 0;
}

.store-data-media-title {
    overflow: hidden;
    color: var(--store-text-main);
    font-weight: 750;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.store-data-media-caption {
    display: block;
    margin-top: 0.2rem;
    color: var(--store-text-muted);
}

.store-data-code-column, .store-data-code-cell {
    min-width: 7rem;
}

.store-data-code {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.2rem 0.5rem;
    color: var(--store-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--store-surface-subtle);
    border: 1px solid var(--store-border);
    border-radius: 0.4rem;
}

.store-data-description-column, .store-data-description-cell {
    min-width: 16rem;
}

.store-data-description-text {
    display: -webkit-box;
    max-width: 22rem;
    overflow: hidden;
    color: var(--store-text-secondary);
    line-height: 1.45;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.store-data-status-column, .store-data-status-cell {
    min-width: 10rem;
}

.store-data-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid;
    border-radius: 999px;
}

.store-data-status--positive {
    color: var(--store-main-color-dark);
    background: color-mix( in srgb, var(--store-main-color) 9%, var(--store-white) );
    border-color: color-mix( in srgb, var(--store-main-color) 28%, var(--store-border) );
}

.store-data-status--neutral {
    color: var(--store-text-secondary);
    background: var(--store-surface-subtle);
    border-color: var(--store-border);
}

.store-data-number-column, .store-data-number-cell {
    min-width: 7.5rem;
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.store-data-number-cell {
    vertical-align: middle !important;
}

.store-data-number-column .mud-table-sort-label {
    justify-content: flex-end;
    width: 100%;
}

@media screen and (max-width: 959.98px) {
    .store-data-table--media .mud-table-root {
        min-width: 0;
    }

    .store-data-table--media .mud-table-row {
        margin: 0.75rem;
        overflow: hidden;
        background: var(--store-white);
        border: 1px solid var(--store-border);
        border-radius: var(--store-radius-md);
    }

    .store-data-table--media .mud-table-cell {
        min-width: 0;
        padding: 0.7rem 1rem !important;
    }

    .store-data-table--media .store-data-media-cell {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .store-data-table--media .store-data-thumbnail {
        flex-basis: 4.5rem;
        width: 4.5rem;
        height: 4.5rem;
    }

    .store-data-table--media .store-data-description-text {
        display: block;
        max-width: none;
        overflow: visible;
        -webkit-line-clamp: unset;
    }

    .store-data-table--media .store-data-number-cell {
        text-align: left !important;
    }

    .store-data-table--media .store-data-row-action {
        width: 100%;
        min-width: 0;
    }
}

@media screen and (min-width: 960px) {
    .store-data-table--media.store-data-table--media-compact .mud-table-root {
        min-width: 44rem;
    }
}

.store-data-usage-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2rem;
    padding: 0.25rem 0.55rem;
    color: var(--store-text-main);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: var(--store-surface-subtle);
    border: 1px solid var(--store-border);
    border-radius: 999px;
}

.store-data-delete-action {
    color: var(--store-danger) !important;
    background: var(--store-white) !important;
    border-color: var(--store-danger) !important;
    box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .store-data-delete-action:hover:not(:disabled) {
        color: var(--store-white) !important;
        background: var(--store-danger) !important;
        border-color: var(--store-danger) !important;
        box-shadow: none !important;
    }
}

@media screen and (max-width: 959.98px) {
    .store-data-table--media-compact .store-data-delete-action {
        width: 100%;
        min-width: 0;
    }
}
/* Graphic: starts on the left and uses the remaining space */
.store-data-media-column,
.store-data-media-cell {
    width: 33%;
    max-width: 33%;
    text-align: left !important;
}

/* Used by: centered in a compact column */
.store-data-usage-column,
.store-data-usage-cell {
    width: 8rem;
    min-width: 8rem;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Actions: aligned at the far right */
.store-data-actions-column,
.store-data-actions-cell {
    width: 9rem;
    min-width: 9rem;
    text-align: right !important;
    vertical-align: middle !important;
    white-space: nowrap;
}