/* VideoStages clip editor: clip cards use SwarmUI `.input-group` + shrinkable
 * headers; inner rows are native `auto-input` markup. This file only styles
 * editor-specific layout (section blocks, ref/stage cards, header actions,
 * add buttons, empty state, inline errors, disabled tint). */

#auto-group-videostages .vs-clips-container {
    --vs-transition-surface: border-color 0.15s, background 0.15s,
        box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;
    color: var(--text);
}

#auto-group-videostages .vs-clips-container *,
#auto-group-videostages .vs-clips-container *::before,
#auto-group-videostages .vs-clips-container *::after {
    box-sizing: border-box;
}

#auto-group-videostages .vs-clips-container .vs-clip-stack {
    display: block;
    width: 100%;
    min-width: 0;
}

/* Clip cards: full width vs default input-group max-width; skip-state tint. */

#auto-group-videostages .vs-clips-container .vs-clip-card.input-group {
    display: block;
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
    max-width: 100%;
    transition: var(--vs-transition-surface);
}

#auto-group-videostages .vs-clips-container .vs-clip-card.input-group.input-group-open {
    margin-bottom: 0;
}

#auto-group-videostages .vs-clips-container .vs-clip-card.vs-skipped.input-group {
    border-color: var(--light-border);
    box-shadow: inset 0 0 0 1px
        color-mix(in srgb, var(--bs-warning) 20%, transparent);
}
#auto-group-videostages .vs-clips-container .vs-clip-card.vs-skipped > .vs-clip-card-body {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(0.6);
}
#auto-group-videostages .vs-clips-container .vs-clip-card.vs-skipped .header-label {
    text-decoration: line-through;
    color: var(--text-soft);
}

/* Action buttons (skip / delete) inside the native `.header-label-wrap`. */
#auto-group-videostages .vs-clips-container .vs-clip-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

#auto-group-videostages .vs-clips-container .vs-clip-card-body.input-group-content {
    max-width: 100%;
    padding: 8px 10px 10px;
}

/* Bordered panels (AUDIO / CONTROLNET / refs / stages). */

#auto-group-videostages .vs-clips-container .vs-section-block {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-block: 6px;
    border: 1px solid var(--light-border);
    border-radius: 10px;
    padding: 10px 12px 12px;
    background: color-mix(
        in srgb,
        var(--background-panel) 82%,
        var(--background-soft) 18%
    );
}
#auto-group-videostages .vs-clips-container .vs-section-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#auto-group-videostages .vs-clips-container .vs-section-block-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Ref and stage cards stacked vertically. */

#auto-group-videostages .vs-clips-container .vs-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-block: 4px;
    width: 100%;
    min-width: 0;
    align-items: stretch;
}

#auto-group-videostages .vs-clips-container .vs-card-list > .vs-card,
#auto-group-videostages .vs-clips-container .vs-card-list > .vs-card.input-group {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    align-self: stretch;
}

#auto-group-videostages .vs-clips-container .vs-card {
    background: var(--background-panel);
    border: 1px solid var(--light-border);
    border-radius: 6px;
    padding: 6px 8px;
    min-width: 0;
    transition: var(--vs-transition-surface);
}

#auto-group-videostages .vs-clips-container .vs-card.input-group {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

#auto-group-videostages .vs-clips-container .vs-card.vs-skipped {
    opacity: 0.5;
    border-style: dashed;
}
#auto-group-videostages .vs-clips-container .vs-card.vs-skipped .vs-card-body {
    pointer-events: none;
}

#auto-group-videostages .vs-clips-container .vs-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#auto-group-videostages .vs-clips-container .vs-card-title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

#auto-group-videostages .vs-clips-container .vs-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

#auto-group-videostages .vs-clips-container .vs-card-body {
    margin-top: 8px;
    transition: var(--vs-transition-surface);
}

#auto-group-videostages .vs-clips-container .vs-card-body.input-group-content {
    max-width: 100%;
    padding-bottom: 0.5rem;
}

#auto-group-videostages .vs-clips-container .vs-clip-card-body.input-group-content > .auto-input,
#auto-group-videostages .vs-clips-container .vs-card-body.input-group-content > .auto-input {
    flex: 1 1 17rem;
    width: min(100%, 50rem);
    min-width: min(17rem, 100%);
    max-width: 100%;
    overflow: visible;
}

#auto-group-videostages .vs-clips-container .vs-clip-card-body label,
#auto-group-videostages .vs-clips-container .vs-card-body label {
    display: block;
    max-width: 100%;
    min-width: 0;
}

#auto-group-videostages .vs-clips-container .vs-clip-card-body .auto-input-name,
#auto-group-videostages .vs-clips-container .vs-card-body .auto-input-name {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

#auto-group-videostages .vs-clips-container .vs-clip-card-body .auto-dropdown,
#auto-group-videostages .vs-clips-container .vs-card-body .auto-dropdown,
#auto-group-videostages .vs-clips-container .vs-clip-card-body .auto-slider-range-wrapper,
#auto-group-videostages .vs-clips-container .vs-card-body .auto-slider-range-wrapper {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
}

#auto-group-videostages .vs-clips-container :disabled,
#auto-group-videostages .vs-clips-container :is(
    .auto-dropdown-box:has(.auto-dropdown:disabled),
    .auto-checkbox-box:has(.auto-checkbox:disabled),
    .auto-slider-box:has(
        :is(.auto-slider-number, .auto-slider-range):disabled
    )
) {
    opacity: 0.45;
    color: var(--text-soft);
}

#auto-group-videostages .vs-clips-container .vs-btn-tiny {
    height: 22px;
    min-width: 24px;
    padding: 0 6px;
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

#auto-group-videostages .vs-clips-container [data-clip-action="delete"],
#auto-group-videostages .vs-clips-container [data-ref-action="delete"],
#auto-group-videostages .vs-clips-container [data-stage-action="delete"],
#auto-group-videostages .vs-clips-container [data-clip-action="delete"]:disabled,
#auto-group-videostages .vs-clips-container [data-ref-action="delete"]:disabled,
#auto-group-videostages .vs-clips-container [data-stage-action="delete"]:disabled {
    cursor: pointer !important;
}

#auto-group-videostages .vs-clips-container [data-clip-action="delete"]:hover,
#auto-group-videostages .vs-clips-container [data-ref-action="delete"]:hover,
#auto-group-videostages .vs-clips-container [data-stage-action="delete"]:hover {
    background-color: var(--danger-button-background);
    color: var(--danger-button-foreground);
    border-color: var(--danger-button-border);
}

#auto-group-videostages .vs-clips-container .vs-clip-card:has([data-clip-action="delete"]:hover),
#auto-group-videostages .vs-clips-container .vs-ref-card:has([data-ref-action="delete"]:hover),
#auto-group-videostages .vs-clips-container .vs-card[data-stage-idx]:has([data-stage-action="delete"]:hover) {
    border-color: color-mix(in srgb, var(--red) 50%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 40%, transparent);
}
#auto-group-videostages .vs-clips-container .vs-btn-collapse {
    font-size: 11px;
}

#auto-group-videostages .vs-clips-container .vs-btn-skip-active {
    border-color: color-mix(
        in srgb,
        var(--bs-warning) 55%,
        var(--light-border) 45%
    );
    background: color-mix(
        in srgb,
        var(--bs-warning) 24%,
        var(--background-panel) 76%
    );
    color: var(--text);
}

#auto-group-videostages .vs-clips-container .vs-btn-skip-active:hover {
    border-color: color-mix(
        in srgb,
        var(--bs-warning) 70%,
        var(--light-border) 30%
    );
    background: color-mix(
        in srgb,
        var(--bs-warning) 34%,
        var(--background-panel) 66%
    );
}

#auto-group-videostages .vs-clips-container .vs-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 28px;
    padding: 0 10px;
    border: 1px dashed var(--light-border);
    background: transparent;
    color: var(--text-soft);
    border-radius: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition:
        border-color 0.15s,
        color 0.15s,
        background 0.15s;
}
#auto-group-videostages .vs-clips-container .vs-add-btn:hover {
    border-color: var(--emphasis);
    color: var(--emphasis);
    background: color-mix(in srgb, var(--emphasis) 8%, transparent);
}
#auto-group-videostages .vs-clips-container .vs-add-btn-clip {
    height: 36px;
}

#auto-group-videostages .vs-clips-container .vs-field-error {
    flex-basis: 100%;
    width: 100%;
    color: var(--bs-danger);
    font-size: 11px;
}

#auto-group-videostages .vs-clips-container .vs-empty-card {
    border: 1px dashed var(--light-border);
    border-radius: 6px;
    padding: 18px 12px;
    background: var(--background-panel);
    color: var(--text-soft);
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

#auto-group-videostages .vs-dimensions-info-body {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#auto-group-videostages .vs-dimensions-info-body .param_view_block {
    padding-left: 5px;
    padding-right: 5px;
}

#auto-group-videostages .vs-dimensions-info-body .controlnet-friendly {
    color: var(--emphasis-soft);
}