/* Dramster brandbook v2, pp. 13–14. UI adaptation for the staff panel. */
:root {
    color-scheme: light;
    --dramster-cyan: #46d9ff;
    --dramster-blue: #2f6bff;
    --dramster-violet: #8a3bff;
    --dramster-pink: #ff4fc4;
    --dramster-bg: #f4f3fa;
    --dramster-surface: #ffffff;
    --dramster-raised: #f4f3fa;
    --dramster-ink: #0b0a1f;
    --dramster-secondary: #3d3b57;
    --dramster-muted: #5e5c78;
    --dramster-label: #1f5be0;
    --dramster-line: rgb(11 10 31 / 12%);
}

:root.dark {
    color-scheme: dark;
    --dramster-bg: #07061a;
    --dramster-surface: #12102e;
    --dramster-raised: #1b1450;
    --dramster-ink: #ffffff;
    --dramster-secondary: #c9cbe6;
    --dramster-muted: #a9accf;
    --dramster-label: #7fe3ff;
    --dramster-line: rgb(255 255 255 / 16%);
}

.fi-body {
    background: var(--dramster-bg);
    color: var(--dramster-ink);
}

.fi-simple-main {
    background: var(--dramster-surface);
    border: 1px solid var(--dramster-line);
    border-radius: 20px;
    box-shadow: none;
    padding-block: 40px;
}

.fi-simple-main-ctn {
    padding-inline: 20px;
}

.fi-simple-header .fi-logo {
    width: auto;
    max-width: 100%;
    height: 56px !important;
    object-fit: contain;
}

.fi-simple-header-heading,
.fi-header-heading {
    color: var(--dramster-ink);
    letter-spacing: -0.02em;
}

.fi-simple-header-heading {
    font-size: 22px;
}

.fi-fo-field-wrp-label,
.fi-section-header-heading,
.fi-wi-account-welcome,
.fi-sidebar-item-label {
    color: var(--dramster-ink);
}

.fi-simple-header-subheading,
.fi-header-subheading,
.fi-section-header-description {
    color: var(--dramster-secondary);
}

.fi-fo-checkbox-list-option-label,
.fi-fo-checkbox-label {
    color: var(--dramster-secondary);
}

.fi-input-wrp {
    background: var(--dramster-bg);
    border-radius: 12px;
}

.fi-input {
    color: var(--dramster-ink);
}

.fi-input::placeholder {
    color: var(--dramster-muted);
    opacity: 1;
}

.fi-simple-main .fi-btn {
    min-height: 48px;
    border-radius: 999px;
    font-weight: 600;
}

.fi-topbar,
.fi-sidebar,
.fi-section,
.fi-ta-ctn,
.fi-modal-window {
    background: var(--dramster-surface);
    color: var(--dramster-ink);
}

.fi-topbar {
    box-shadow: none;
    border-bottom: 1px solid var(--dramster-line);
}

.fi-sidebar {
    border-inline-end: 1px solid var(--dramster-line);
}

.fi-section,
.fi-ta-ctn {
    border-radius: 16px;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--dramster-raised);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: var(--dramster-label);
}

.dramster-login-context {
    margin-block: 8px 24px;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: var(--dramster-muted);
}

.dramster-login-appearance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-block: -36px 24px;
    color: var(--dramster-muted);
    font-size: 12px;
}

@media (max-width: 639px) {
    .fi-simple-main {
        padding: 28px 24px;
        margin-block: 32px 56px;
    }
}

.dramster-product-name {
    display: inline-flex;
    flex-shrink: 0;
    margin-inline-start: 16px;
}

.fi-account-widget-user-name {
    color: var(--dramster-muted);
}

/* The sidebar already displays the product name on wide screens. */
@media (min-width: 1024px) {
    .dramster-product-name {
        display: none;
    }
}

/* Video source upload: explicit styles because Filament ships precompiled utilities. */
.dramster-video-form { display: grid; gap: 20px; line-height: 1.55; }
.dramster-video-form > p { margin: 0; }
.dramster-video-file { display: grid; gap: 8px; }
.dramster-video-file input { max-width: 100%; padding: 12px; border: 1px solid var(--dramster-line); border-radius: 12px; background: var(--dramster-bg); }
.dramster-video-file input::file-selector-button { margin-right: 12px; padding: 6px 10px; border: 1px solid var(--dramster-line); border-radius: 8px; background: var(--dramster-raised); color: var(--dramster-ink); cursor: pointer; }
.dramster-video-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dramster-video-form progress { display: block; width: 100%; accent-color: var(--dramster-blue); }
.dramster-video-preview { width: 100%; max-height: 65vh; background: #07061a; border-radius: 12px; }
.dramster-video-form select { padding: 8px; border: 1px solid var(--dramster-line); border-radius: 8px; background: var(--dramster-surface); color: var(--dramster-ink); }