@charset "UTF-8";

/*
 * ts-lms-actions.css
 * Shared LMS action groups, badges, chips and action menus.
 * Split from ts-lms-components.css in P15.183.
 */

.ts-card-action-group,
.ts-action-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ts-card-action-group > .ts-btn,
.ts-card-action-group > .btn,
.ts-action-button-group > .ts-btn,
.ts-action-button-group > .btn {
    flex: 1 1 160px;
}

.ts-action-btn--create,
.ts-btn-create {
    color: var(--color-success-text);
    border-color: color-mix(in srgb, var(--color-success) 28%, var(--color-border));
    background: var(--color-success-light);
}

.ts-action-btn--edit,
.ts-btn-edit,
.ts-action-btn--publish,
.ts-btn-publish {
    color: var(--color-primary-text);
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    background: var(--color-primary-light);
}

.ts-action-btn--cancel,
.ts-btn-cancel {
    color: var(--color-text-secondary);
    border-color: var(--color-border);
    background: var(--color-bg-card);
}

.ts-action-btn--delete,
.ts-btn-delete {
    color: var(--color-danger-text);
    border-color: color-mix(in srgb, var(--color-danger) 28%, var(--color-border));
    background: var(--color-danger-light);
}

.ts-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}

.ts-badge-primary {
    border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
    background: var(--color-primary-light);
    color: var(--color-primary-text);
}

.ts-badge-secondary {
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
}

.ts-badge-success {
    border-color: color-mix(in srgb, var(--color-success) 28%, var(--color-border));
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.ts-badge-warning {
    border-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-border));
    background: color-mix(in srgb, var(--color-warning) 14%, #ffffff);
    color: color-mix(in srgb, var(--color-warning) 70%, var(--color-text-primary));
}

.ts-badge-danger {
    border-color: color-mix(in srgb, var(--color-danger) 28%, var(--color-border));
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
}

.ts-badge-neutral {
    border-color: var(--color-border);
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
}

.ts-action-menu {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-bg-card);
    box-shadow: var(--shadow-dropdown, 0 14px 34px rgba(15, 23, 42, 0.14));
}

.ts-action-menu-item {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
    text-decoration: none;
    transition: background 0.2s;
    cursor: pointer;
}

.ts-action-menu-item:last-child {
    border-bottom: none;
}

.ts-action-menu-item:hover,
.ts-action-menu-item:focus-visible {
    outline: none;
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
    text-decoration: none;
}

.ts-action-menu-item.ts-action-btn--delete {
    color: var(--color-danger-dark) !important;
}

.ts-action-menu-item.ts-action-btn--delete:hover,
.ts-action-menu-item.ts-action-btn--delete:focus-visible {
    background: var(--color-danger-light) !important;
    color: var(--color-danger-dark) !important;
}

.ts-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    align-items: center;
}

:where(
    .learning-catalog .learning-catalog-row__actions,
    .lp-editor-hero__actions,
    .lp-editor-steps-panel__actions,
    .lp-editor-step-card__actions,
    .test-manage-questions__actions,
    .test-manage-question-list-row__actions,
    .test-manage-question-editor-page__actions,
    .test-manage-question-editor__footer-actions,
    .test-manage-media-thumb__actions,
    .test-runner-actions-row,
    .test-runner-primary-actions,
    .test-runner-secondary-actions
) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
}

:where(
    .learning-catalog .learning-catalog-row__actions,
    .lp-editor-hero__actions,
    .lp-editor-steps-panel__actions,
    .lp-editor-step-card__actions,
    .test-manage-questions__actions,
    .test-manage-question-list-row__actions,
    .test-manage-question-editor-page__actions,
    .test-manage-question-editor__footer-actions,
    .test-runner-actions-row
) > :where(.ts-btn, .btn, a, button) {
    min-width: 0;
}

.ts-card-action,
.ts-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 34px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

.ts-card-action:hover,
.ts-icon-btn:hover {
    border-color: var(--color-border-strong);
    background: var(--color-bg-hover);
    color: var(--color-primary-text);
}

.ts-icon-btn--primary {
    color: var(--color-primary-text);
    border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
    background: var(--color-primary-light);
}

.ts-icon-btn--success {
    color: var(--color-success-text);
    border-color: color-mix(in srgb, var(--color-success) 22%, var(--color-border));
    background: var(--color-success-light);
}

.ts-icon-btn--warning {
    color: var(--color-warning-text);
    border-color: color-mix(in srgb, var(--color-warning) 28%, var(--color-border));
    background: var(--color-warning-light);
}

.ts-icon-btn--danger {
    color: var(--color-danger-text);
    border-color: color-mix(in srgb, var(--color-danger) 22%, var(--color-border));
    background: var(--color-danger-light);
}

.ts-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.ts-filter-chip:hover,
.ts-filter-chip:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
    background: var(--color-bg-subtle);
    color: var(--color-primary);
    text-decoration: none;
}

.ts-filter-chip.is-active,
.ts-filter-chip.active {
    color: var(--color-primary-text);
    border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
    background: var(--color-primary-light);
}

.ts-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
    justify-content: space-between;
}

.ts-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

.ts-admin-table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    align-items: center;
}

@media (max-width: 768px) {
    .ts-card-action-group,
    .ts-action-button-group {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .ts-action-bar {
        flex-direction: column;
        align-items: stretch;
    }
}