/* 解说漫 / 画布项目列表。只给 workflow-projects-layout 用。参考 stitch 09_pc_1、10_pc_1。 */

@import url("../../../components/ui-search-select/ui-search-select.css?v=5007ff9d16f5");

.st-workflow {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.st-workflow .ui-svg-icon {
    display: block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.st-workflow-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.st-workflow-toolbar-start,
.st-workflow-toolbar-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.st-workflow-toolbar-end {
    flex-shrink: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.st-workflow-toolbar-start .st-btn:not(.st-btn-accent) {
    border-color: var(--st-border);
    background: var(--st-surface);
    color: var(--st-text-muted);
}

.st-workflow-toolbar-start .st-btn:not(.st-btn-accent):hover {
    background: var(--st-nav-hover-bg);
    color: var(--st-text);
}

#manageModeBtn.is-active {
    background: var(--st-accent-soft);
    border-color: var(--st-accent-border);
    color: var(--st-accent);
}

.st-workflow.is-group-view .workflow-project-filter,
.st-workflow.is-group-view .workflow-project-create-group-btn {
    display: none;
}

.st-workflow.is-create-hidden #createProjectBtn {
    display: none;
}

.st-workflow .st-search {
    display: flex;
    background: var(--st-elevated);
}

.st-workflow-context,
.st-workflow-batch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    background: var(--st-surface);
}

.st-workflow-batch {
    justify-content: space-between;
}

.st-workflow-context.hidden,
.st-workflow-batch.hidden {
    display: none;
}

.st-workflow-context-text,
.st-workflow-batch-text {
    color: var(--st-text);
    font-size: 13px;
    font-weight: 600;
}

.st-workflow-batch-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.workflow-project-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 24px;
    min-width: 0;
}

.workflow-project-view-switch {
    display: flex;
    align-items: center;
    gap: 16px;
    width: fit-content;
    margin: 0;
}

.workflow-project-view-switch-item {
    position: relative;
    padding: 4px 0 6px;
    border: 0;
    background: transparent;
    color: var(--st-text-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

.workflow-project-view-switch-item:hover,
.workflow-project-view-switch-item:focus-visible {
    color: var(--st-accent);
}

.workflow-project-view-switch-item:focus-visible {
    outline: 2px solid var(--st-accent);
    outline-offset: 2px;
}

.workflow-project-view-switch-item.is-current {
    color: var(--st-accent);
}

.workflow-project-view-switch-item.is-current::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: 1px;
    background: var(--st-accent);
}

.workflow-project-shell.is-bookmark-view .st-workflow-toolbar,
.workflow-project-shell.is-bookmark-view #groupContextBar,
.workflow-project-shell.is-bookmark-view #batchActionBar {
    display: none;
}

.workflow-project-bookmark-open {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.workflow-project-bookmark-open:focus-visible {
    outline: none;
}

.workflow-project-bookmark-card .js-bookmark-remove-btn {
    position: relative;
    z-index: 2;
}

.workflow-project-bookmark-card:not(.is-blocked):hover,
.workflow-project-bookmark-card:not(.is-blocked):focus-within {
    border-color: color-mix(in srgb, var(--st-accent) 30%, var(--st-border));
    background: color-mix(in srgb, var(--st-surface) 88%, var(--st-track));
    outline: none;
}

.st-workflow-card.workflow-project-bookmark-card {
    height: auto;
}

.workflow-project-bookmark-card .st-workflow-card-thumb {
    flex: 0 0 auto;
}

.workflow-project-shell.is-bookmark-view .st-workflow-grid {
    align-items: start;
}

.workflow-project-bookmark-owner,
.workflow-project-bookmark-status {
    margin: 0;
    color: var(--st-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.workflow-project-bookmark-owner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workflow-project-bookmark-status {
    white-space: normal;
}

.workflow-project-bookmark-card.is-blocked {
    cursor: default;
}

.workflow-project-bookmark-card.is-blocked .workflow-project-bookmark-status {
    color: var(--st-danger);
}

.st-workflow-list {
    min-height: 280px;
}

.st-workflow-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.st-workflow-create,
.st-workflow-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 230px;
    overflow: hidden;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    background: var(--st-surface);
    box-shadow: var(--st-shadow-card);
}

.st-workflow-create {
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-style: dashed;
    border-width: 2px;
    border-color: var(--st-border-strong);
    background: color-mix(in srgb, var(--st-surface) 60%, transparent);
    color: var(--st-text-muted);
    gap: 12px;
    cursor: pointer;
    appearance: none;
    transition: border-color var(--st-duration) ease, background-color var(--st-duration) ease, color var(--st-duration) ease;
}

.st-workflow-create:hover,
.st-workflow-create:focus-visible {
    border-color: var(--st-accent);
    background: var(--st-accent-soft);
    color: var(--st-accent);
    outline: none;
}

.st-workflow-create-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--st-radius-pill);
    border: 1px solid var(--st-border);
    background: var(--st-track);
    color: inherit;
}

.st-workflow-create:hover .st-workflow-create-plus,
.st-workflow-create:focus-visible .st-workflow-create-plus {
    border-color: color-mix(in srgb, var(--st-accent) 40%, transparent);
    background: color-mix(in srgb, var(--st-accent) 16%, var(--st-surface));
}

.st-workflow-create-plus .ui-svg-icon {
    width: 24px;
    height: 24px;
}

.st-workflow-create-label {
    font-size: 14px;
    font-weight: 600;
}

.st-workflow-card {
    position: relative;
    padding: 16px;
    gap: 12px;
    transition: border-color var(--st-duration) ease, background-color var(--st-duration) ease;
}

.st-workflow-card.project-card-clickable,
.st-workflow-card.project-card-manage,
.st-workflow-card.group-card-clickable {
    cursor: pointer;
}

.st-workflow-card.project-card-manage.is-selected {
    border-color: color-mix(in srgb, var(--st-accent) 40%, var(--st-border));
    background: color-mix(in srgb, var(--st-accent) 6%, var(--st-surface));
}

.st-workflow-card.project-card-clickable:hover,
.st-workflow-card.group-card-clickable:hover,
.st-workflow-card.project-card-clickable:focus-visible,
.st-workflow-card.group-card-clickable:focus-visible {
    border-color: color-mix(in srgb, var(--st-accent) 30%, var(--st-border));
    background: color-mix(in srgb, var(--st-surface) 88%, var(--st-track));
    outline: none;
}

.st-workflow-card-thumb {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.st-workflow-card-thumb-well {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 96px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    background: color-mix(in srgb, var(--st-text) 4%, var(--st-track));
    color: var(--st-text-ghost);
}

.st-workflow-card:hover .st-workflow-card-thumb-well,
.st-workflow-card:focus-within .st-workflow-card-thumb-well {
    color: var(--st-text-muted);
}

.st-workflow-card.is-group .st-workflow-card-thumb-well {
    color: var(--st-ok);
    background: color-mix(in srgb, var(--st-ok) 8%, var(--st-track));
    border-color: color-mix(in srgb, var(--st-ok) 18%, var(--st-border));
}

.st-workflow-card-thumb-well .ui-svg-icon {
    width: 28px;
    height: 28px;
}

.st-workflow-card-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--st-border);
}

.st-workflow-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.st-workflow-card-title,
.project-name,
.group-name {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    color: var(--st-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
    outline: none;
}

.st-workflow-card.project-card-clickable .project-name,
.st-workflow-card.group-card-clickable .group-name {
    cursor: pointer;
}

.st-workflow-card:hover .st-workflow-card-title,
.st-workflow-card:hover .project-name,
.st-workflow-card:hover .group-name {
    color: var(--st-accent);
}

.project-name.editing,
.group-name.editing {
    overflow: visible;
    background: var(--st-elevated);
    border: 1px solid var(--st-accent);
    border-radius: 8px;
    padding: 2px 8px;
    cursor: text;
    text-overflow: clip;
    white-space: normal;
}

.st-workflow-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.st-workflow-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--st-radius-md);
    background: transparent;
    color: var(--st-text-ghost);
    cursor: pointer;
}

.st-workflow-card-action:hover,
.st-workflow-card-action:focus-visible {
    color: var(--st-text);
    background: var(--st-nav-hover-bg);
    outline: none;
}

.st-workflow-card-action.is-danger:hover,
.st-workflow-card-action.is-danger:focus-visible {
    color: var(--st-danger);
    background: color-mix(in srgb, var(--st-danger) 12%, transparent);
}

.st-workflow-card-action .ui-svg-icon {
    width: 14px;
    height: 14px;
}

.st-workflow-card-time,
.project-card-time {
    margin: 0;
    overflow: hidden;
    color: var(--st-text-ghost);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-select-wrap {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.project-select-checkbox {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--st-accent);
    cursor: pointer;
}

.st-workflow-empty,
.st-workflow-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 280px;
    padding: 48px 16px;
    color: var(--st-text-muted);
    text-align: center;
}

.st-workflow-empty-title {
    color: var(--st-text);
    font-size: 16px;
    font-weight: 600;
}

.st-workflow-empty-desc {
    font-size: 13px;
}

.st-workflow-loading::before {
    content: "";
    width: 28px;
    height: 28px;
    border: 2px solid var(--st-border-strong);
    border-top-color: var(--st-accent);
    border-radius: 999px;
    animation: st-workflow-spin 0.8s linear infinite;
}

@keyframes st-workflow-spin {
    to {
        transform: rotate(360deg);
    }
}

.st-workflow-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.st-workflow-count {
    color: var(--st-text-muted);
    font-size: 13px;
}

.st-workflow-count strong {
    color: var(--st-text);
    font-weight: 600;
}

@media (min-width: 768px) {
    .st-workflow-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .st-workflow-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .st-workflow-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 1536px) {
    .st-workflow-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .workflow-project-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .st-workflow-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .st-workflow-toolbar-start,
    .st-workflow-toolbar-end {
        width: 100%;
    }

    .st-workflow-toolbar-end {
        flex-wrap: nowrap;
    }

    .st-workflow-toolbar-end .st-search {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .st-workflow-batch-actions {
        width: 100%;
    }

    .st-workflow-batch-actions .st-btn {
        flex: 1 1 auto;
    }
}