/* Shared Material UI foundation.
   Stage 2: components and tokens only. Page migrations happen in later stages. */
:root {
    --material-thumb-radius: 10px;
    --material-thumb-tiny-width: 32px;
    --material-thumb-tiny-height: 24px;
    --material-thumb-small-width: 48px;
    --material-thumb-small-height: 36px;
    --material-thumb-medium-width: 80px;
    --material-thumb-medium-height: 60px;
    --material-thumb-large-width: 120px;
    --material-thumb-large-height: 90px;
    --material-card-radius: 12px;
    --material-card-gap: 12px;
    --material-card-padding: 12px;
    --material-card-bg: var(--editor-card, var(--app-surface, #102035));
    --material-card-bg-hover: var(--editor-card-hover, #142942);
    --material-card-border: var(--editor-border, #29405a);
    --material-card-border-hover: var(--editor-border-strong, #3a5573);
    --material-card-selected: var(--editor-accent, #7447ed);
    --material-text-primary: var(--editor-text-primary, #f5f7fb);
    --material-text-secondary: var(--editor-text-secondary, #aebbd0);
    --material-text-muted: var(--editor-text-muted, #8090a8);
    --material-success: var(--editor-success, #16d995);
    --material-warning: var(--editor-warning, #f6b84a);
    --material-danger: var(--editor-danger, #ff6170);
}

.material-thumbnail {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    width: var(--material-thumb-small-width);
    height: var(--material-thumb-small-height);
    aspect-ratio: 4 / 3;
    border: 1px solid var(--material-card-border);
    border-radius: var(--material-thumb-radius);
    background: color-mix(in srgb, var(--material-card-bg) 88%, black 12%);
    color: var(--material-text-secondary);
    isolation: isolate;
}

.material-thumbnail--tiny { width: var(--material-thumb-tiny-width); height: var(--material-thumb-tiny-height); }
.material-thumbnail--small { width: var(--material-thumb-small-width); height: var(--material-thumb-small-height); }
.material-thumbnail--medium { width: var(--material-thumb-medium-width); height: var(--material-thumb-medium-height); }
.material-thumbnail--large { width: var(--material-thumb-large-width); height: var(--material-thumb-large-height); }
.material-thumbnail--fluid { width: 100%; height: auto; min-height: 0; }

.material-thumbnail > img,
.material-thumbnail__color,
.material-thumbnail__placeholder {
    width: 100%;
    height: 100%;
}

.material-thumbnail > img {
    display: block;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    border-radius: inherit;
}

.material-thumbnail__color {
    display: block;
    background: var(--material-thumbnail-color, transparent);
}

.material-thumbnail__placeholder {
    display: grid;
    place-items: center;
    background:
        linear-gradient(135deg, transparent 0 45%, color-mix(in srgb, var(--material-card-border) 55%, transparent) 45% 55%, transparent 55% 100%),
        color-mix(in srgb, var(--material-card-bg) 78%, white 4%);
    font-size: 12px;
    font-weight: 750;
    text-transform: uppercase;
}

.material-thumbnail__overlay,
.material-thumbnail__warning {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

.material-thumbnail__overlay {
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    background: var(--material-card-selected);
    color: white;
    font-size: 11px;
}

.material-thumbnail__overlay--default {
    background: color-mix(in srgb, var(--material-card-selected) 72%, #f6b84a 28%);
}

.material-thumbnail__warning {
    left: 4px;
    bottom: 4px;
    width: 17px;
    height: 17px;
    background: var(--material-warning);
    color: #111827;
    font-size: 11px;
    font-weight: 800;
}

.material-info {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.material-info__name,
.material-info__code,
.material-info__secondary {
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
}

.material-info__name {
    color: var(--material-text-primary);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
}

.material-info__code,
.material-info__secondary {
    color: var(--material-text-secondary);
    font-size: 12px;
    line-height: 1.35;
}

.material-info__secondary { color: var(--material-text-muted); }
.material-info--compact .material-info__name { font-size: 13px; }
.material-info--compact .material-info__code,
.material-info--compact .material-info__secondary { font-size: 11px; }

.material-quality-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 22px;
    gap: 6px;
    padding: 2px 8px;
    border: 1px solid var(--material-card-border);
    border-radius: 999px;
    color: var(--material-text-secondary);
    background: color-mix(in srgb, var(--material-card-bg) 88%, transparent);
    font-size: 11px;
    line-height: 1;
    font-weight: 650;
}

.material-quality-badge__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.material-quality-badge--pbrready { color: var(--material-success); }
.material-quality-badge--basic,
.material-quality-badge--missingmaps { color: var(--material-warning); }
.material-quality-badge--nopreview { color: var(--material-danger); }

.material-card {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--material-card-gap);
    padding: var(--material-card-padding);
    border: 1px solid var(--material-card-border);
    border-radius: var(--material-card-radius);
    background: var(--material-card-bg);
    color: var(--material-text-primary);
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.material-card[role="button"] { cursor: pointer; }
.material-card[role="button"]:hover {
    border-color: var(--material-card-border-hover);
    background: var(--material-card-bg-hover);
}
.material-card[role="button"]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--material-card-selected) 68%, white 12%);
    outline-offset: 2px;
}
.material-card.is-selected {
    border-color: var(--material-card-selected);
    box-shadow: 0 0 0 1px var(--material-card-selected), 0 10px 24px color-mix(in srgb, var(--material-card-selected) 18%, transparent);
}
.material-card.is-disabled { opacity: .5; pointer-events: none; }
.material-card__content { min-width: 0; display: grid; gap: 8px; }
.material-card__actions { justify-self: end; }

.material-card--selectable,
.material-card--preview,
.material-card--gallery {
    grid-template-columns: 1fr;
    align-content: start;
}
.material-card--selectable .material-thumbnail,
.material-card--preview .material-thumbnail,
.material-card--gallery .material-thumbnail { width: 100%; height: auto; }
.material-card--gallery .material-thumbnail { aspect-ratio: 16 / 10; }

.material-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.material-action {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--material-text-secondary);
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.material-action:hover,
.material-action:focus-visible,
.material-action.is-active {
    border-color: var(--material-card-border-hover);
    background: color-mix(in srgb, var(--material-card-selected) 12%, transparent);
    color: var(--material-text-primary);
    outline: none;
}
.material-action--danger:hover,
.material-action--danger:focus-visible { color: var(--material-danger); border-color: color-mix(in srgb, var(--material-danger) 52%, transparent); }

@media (prefers-reduced-motion: reduce) {
    .material-card,
    .material-action { transition: none; }
}

/* Admin Portal theme bridge. */
.admin-portal-shell,
.admin-reference-shell {
    --material-card-bg: var(--ap-bg-panel);
    --material-card-bg-hover: var(--ap-bg-hover);
    --material-card-border: var(--ap-border-default);
    --material-card-border-hover: color-mix(in srgb, var(--ap-brand-primary) 65%, var(--ap-border-default));
    --material-card-selected: var(--ap-brand-primary);
    --material-text-primary: var(--ap-content-primary);
    --material-text-secondary: var(--ap-content-secondary, var(--ap-content-muted));
    --material-text-muted: var(--ap-content-muted);
    --material-success: var(--ap-status-success, #16d995);
    --material-warning: var(--ap-status-warning, #f6b84a);
    --material-danger: var(--ap-status-danger, #ff6170);
}


/* Final Material UI QA contract: page CSS may size the host, but may not restore circular image crops. */
.material-thumbnail,
.material-thumbnail > img,
.material-thumbnail__color,
.material-thumbnail__placeholder {
    box-sizing: border-box;
}
.material-thumbnail > img {
    max-width: none;
}
.material-thumbnail--fluid {
    aspect-ratio: 4 / 3;
}
@media (prefers-reduced-motion: reduce) {
    .material-card,
    .material-action {
        transition: none;
    }
}

/* Material UI contract: page CSS must not reshape thumbnails or their images. */
.material-thumbnail,
.material-thumbnail > img,
.material-thumbnail__color,
.material-thumbnail__placeholder {
    border-radius: var(--material-thumb-radius) !important;
}

.material-thumbnail > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Stage 13: resilient loading and accessible state feedback. */
.material-thumbnail.is-image-fallback {
    border-style: dashed;
}

.material-thumbnail.has-warning {
    border-color: color-mix(in srgb, var(--material-warning) 58%, var(--material-card-border));
}

.material-thumbnail > img {
    user-select: none;
    -webkit-user-drag: none;
}

.material-thumbnail__warning,
.material-thumbnail__overlay {
    pointer-events: none;
}

@media (forced-colors: active) {
    .material-thumbnail,
    .material-card,
    .material-quality-badge {
        border-color: CanvasText;
    }

    .material-thumbnail__overlay,
    .material-thumbnail__warning {
        forced-color-adjust: none;
    }
}