/* We ain't making a mobile version of this page cause I don't see myself ever using my phone for this, sorry */

.media-preview {
    width: 240px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.poster-preview {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: var(--color-button-light);
}

.backdrop-preview {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: var(--color-button-light);
}

.create-forms {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.slug-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.create-forms p {
    margin: 0;
}

.create-forms textarea:focus {
    background: var(--color-button-dark-focus);
    outline: 1px solid var(--color-button-light-focus) !important;
}

.file-browser {
    flex: 1;
    margin-right: var(--spacing-lg);
}

.file-browser-list {
    width: 100%;
    height: 640px;
    list-style: none;
    overflow-y: auto;
    margin: 0;
    padding: var(--spacing-md);
    background-color: var(--color-topbar);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05); /* Subtle outline for better visibility */
}
.file-browser-nested {
    padding-left: var(--spacing-md);
    width: calc(100% - var(--spacing-md) * 2);
    height: min-content;
}
.file-browser-entry { position: relative; }
.file-browser-row { display: flex; align-items: center; gap: 0.5em; padding: 0.15em 0; }
.file-browser-name { flex: 1; }
.file-browser-dir { cursor: pointer; }
.file-browser-size { color: var(--text-muted, #888); font-size: 0.85em; }
.file-browser-empty { color: var(--text-muted, #888); font-style: italic; padding: 0.25em 0; }
.file-browser-menu-wrap { position: relative; }
.file-browser-menu-btn { display: none; }
.file-browser-menu {
    display: none;
    position: absolute; right: 0; top: 100%; z-index: 10;
    background: var(--surface, #222); border: 1px solid var(--border, #444);
    border-radius: 4px; min-width: 10em; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.file-browser-menu.open { display: flex; flex-direction: column; }
.file-browser-menu button {
    background: none; border: none; text-align: left; padding: 0.4em 0.75em;
    cursor: pointer; width: 100%;
}
.file-browser-menu button:hover { background: var(--surface-hover, #333); }