/* Media library workspace */
.vx-workspace {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr) 24rem;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
        "toolbar toolbar toolbar"
        "alert alert alert"
        "bins browser inspector"
        "uploads uploads uploads";
    height: calc(100vh - 5rem);
    min-height: 32rem;
    gap: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.4rem;
    overflow: hidden;
}

.vx-workspace > .alert { grid-area: alert; }
.vx-toolbar { grid-area: toolbar; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.5rem; border-bottom: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); }
.vx-search { max-width: 28rem; }
.vx-bins { grid-area: bins; overflow: auto; border-right: 1px solid var(--bs-border-color); }
.vx-browser { grid-area: browser; overflow: auto; }
.vx-inspector { grid-area: inspector; overflow: auto; border-left: 1px solid var(--bs-border-color); }
.vx-uploads { grid-area: uploads; border-top: 1px solid var(--bs-border-color); max-height: 12rem; overflow: auto; }

@media (max-width: 992px) {
    .vx-workspace {
        grid-template-columns: 1fr;
        grid-template-areas: "toolbar" "alert" "bins" "browser" "inspector" "uploads";
        height: auto;
    }

    .vx-bins, .vx-inspector { border: 0; border-bottom: 1px solid var(--bs-border-color); }
}

.vx-drop-active { outline: 3px dashed var(--bs-primary); outline-offset: -6px; }

/* Bins */
.vx-bin { color: inherit; display: block; width: 100%; text-align: left; border: 0; background: none; padding: 0.2rem 0.5rem; border-radius: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-bin:hover { background: var(--bs-secondary-bg); }
.vx-bin.active { background: var(--bs-primary-bg-subtle); font-weight: 600; }

/* Browser */
.vx-selection-bar { position: sticky; top: 0; z-index: 1; display: flex; gap: 0.5rem; align-items: center; padding: 0.35rem 0.5rem; background: var(--bs-warning-bg-subtle); }
.vx-asset-table { cursor: pointer; font-size: 0.875rem; }
.vx-asset-table td { vertical-align: middle; }
.vx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; padding: 0.75rem; }
.vx-card { border: 1px solid var(--bs-border-color); border-radius: 0.35rem; overflow: hidden; border-top-width: 4px; }
.vx-card.selected { box-shadow: 0 0 0 2px var(--bs-primary); }
.vx-card-body { padding: 0.35rem 0.5rem; font-size: 0.85rem; }

.vx-thumb { position: relative; background: #212529; color: #adb5bd; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.vx-thumb img { width: 100%; height: 100%; object-fit: contain; }
.vx-sprite { background-repeat: no-repeat; }
.vx-thumb-placeholder { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* Inspector */
.vx-inspector-body { padding: 0.75rem; font-size: 0.875rem; }
.vx-inspector-body details { margin: 0.5rem 0; border-top: 1px solid var(--bs-border-color); padding-top: 0.35rem; }
.vx-inspector-body summary { font-weight: 600; cursor: pointer; }
.vx-preview video, .vx-preview img { width: 100%; max-height: 14rem; background: #000; border-radius: 0.25rem; }
.vx-preview audio { width: 100%; }
.vx-facts { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.1rem 0.5rem; margin: 0.5rem 0; }
.vx-facts dt { font-weight: 500; color: var(--bs-secondary-color); }
.vx-facts dd { margin: 0; }

.vx-waveform { width: 100%; height: 4rem; background: #10233a; border-radius: 0.25rem; margin-top: 0.35rem; }
.vx-waveform path { fill: #5ec2ff; }
.vx-waveform-range { fill: rgba(255, 255, 255, 0.15); }
.vx-waveform-marker { stroke: #ffc107; stroke-width: 2; }

/* Uploads */
.vx-upload-panel { padding: 0.35rem 0.75rem; font-size: 0.85rem; }
.vx-upload-panel li { margin: 0.2rem 0; }
.vx-upload-name { width: 18rem; }
.vx-upload-panel .vx-progress { flex: 1; }

/* Dialogs */
.vx-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 1040; }
.vx-modal { position: fixed; z-index: 1050; top: 10vh; left: 50%; transform: translateX(-50%); width: min(40rem, 94vw); max-height: 80vh; overflow: auto; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 0.5rem; padding: 1rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3); }
.vx-import-list { max-height: 45vh; overflow: auto; border: 1px solid var(--bs-border-color); border-radius: 0.25rem; padding: 0.5rem; }

/* Label colors (Premiere-style) */
.vx-swatch { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 0.15rem; margin-right: 0.3rem; vertical-align: middle; background: var(--vx-label, transparent); border: 1px solid rgba(0, 0, 0, 0.15); }
.vx-card { border-top-color: var(--vx-label, var(--bs-border-color)); }
.vx-label-none { --vx-label: transparent; }
.vx-label-violet { --vx-label: #a990dd; }
.vx-label-iris { --vx-label: #7e8ed6; }
.vx-label-caribbean { --vx-label: #29d3a4; }
.vx-label-lavender { --vx-label: #e384e3; }
.vx-label-cerulean { --vx-label: #2e9fd0; }
.vx-label-forest { --vx-label: #50a32f; }
.vx-label-rose { --vx-label: #f15f8a; }
.vx-label-mango { --vx-label: #f79b3b; }
.vx-label-purple { --vx-label: #9146ba; }
.vx-label-blue { --vx-label: #1b58d6; }
.vx-label-teal { --vx-label: #1f9a9e; }
.vx-label-magenta { --vx-label: #c42fa0; }
.vx-label-tan { --vx-label: #c6a57a; }
.vx-label-green { --vx-label: #38a169; }
.vx-label-brown { --vx-label: #8b5a2b; }
.vx-label-yellow { --vx-label: #e5c11c; }

/* Sequence editor (Phase 2 shell; the canvas timeline arrives in Phase 3) */
.vx-sequence-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas: "toolbar toolbar" "alert alert" "controls controls" "tracks history";
    height: calc(100vh - 5rem);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.4rem;
    overflow: hidden;
}

.vx-sequence-editor > .vx-toolbar { grid-area: toolbar; }
.vx-sequence-editor > .alert { grid-column: 1 / -1; }
.vx-sequence-controls { grid-area: controls; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--bs-border-color); }
.vx-tracks { grid-area: tracks; overflow: auto; outline: none; }
.vx-tracks:focus-visible { box-shadow: inset 0 0 0 2px var(--bs-primary); }
.vx-history { grid-area: history; overflow: auto; border-left: 1px solid var(--bs-border-color); padding: 0.5rem; }
.vx-clip-chip { border: 1px solid var(--bs-primary-border-subtle); background: var(--bs-primary-bg-subtle); border-radius: 0.25rem; margin: 0.1rem; padding: 0.05rem 0.35rem; font-size: 0.8rem; }
.vx-clip-chip.selected { background: var(--bs-primary); border-color: var(--bs-primary); color: #08111f; }
.vx-clip-chip.disabled-clip { opacity: 0.55; }
.vx-sequence-list { border-bottom: 1px solid var(--bs-border-color); padding-bottom: 0.35rem; }

@media (max-width: 992px) {
    .vx-sequence-editor { grid-template-columns: 1fr; grid-template-areas: "toolbar" "alert" "controls" "tracks" "history"; height: auto; }
    .vx-history { border-left: 0; border-top: 1px solid var(--bs-border-color); }
}