/* F1 — Test Management compact component styles */
.tm-card {
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--pg-shell-card-radius, var(--radius-md));
    box-shadow: var(--tm-shadow-sm);
}

.tm-toolbar {
    display: flex;
    gap: var(--pg-shell-toolbar-gap, var(--sp-sm));
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--pg-sp-3);
    flex-wrap: wrap;
}

.tm-toolbar__left,
.tm-toolbar__right {
    display: flex;
    gap: var(--sp-sm);
    align-items: center;
}

.tm-input {
    min-height: var(--pg-shell-chip-height, 32px);
    border: 1px solid var(--tm-border-strong);
    border-radius: var(--pg-radius-md);
    padding: 0 10px;
    font-size: var(--tm-font-sm);
    color: var(--tm-text-primary);
    background: var(--pg-color-surface);
}

.tm-split {
    display: grid;
    grid-template-columns: 260px 6px 1fr;
    min-height: 560px;
    border: 1px solid var(--tm-border);
    border-radius: var(--pg-shell-card-radius, var(--radius-md));
    overflow: hidden;
    background: var(--tm-surface);
    box-shadow: var(--pg-shadow-sm);
}

.tm-split__left {
    border-right: 1px solid var(--tm-border);
    overflow: auto;
    background: var(--pg-color-bg);
}

.tm-split__divider {
    background: var(--pg-color-bg);
    cursor: col-resize;
    border-right: 1px solid var(--tm-border);
    border-left: 1px solid var(--tm-border);
}

.tm-split__right {
    overflow: auto;
}

.tm-tree {
    font-size: var(--tm-font-sm);
    color: var(--tm-text-primary);
}

.tm-tree__header {
    padding: var(--pg-shell-toolbar-pad-y, 10px) var(--pg-shell-toolbar-pad-x, 14px);
    border-bottom: 1px solid var(--tm-border);
    font-size: var(--tm-font-xs);
    font-weight: var(--tm-fw-semibold);
    color: var(--tm-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tm-ls-wide);
}

.tm-tree__search {
    width: calc(100% - 20px);
    margin: var(--pg-sp-3) auto;
}

.tm-tree__list {
    list-style: none;
    margin: 0;
    padding: 4px;
}

.tm-tree__item {
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tm-tree__item:hover {
    background: var(--tm-surface-hover);
}

.tm-tree__item.is-active {
    background: var(--tm-accent-light);
    color: var(--pg-color-primary);
    font-weight: 600;
}

.tm-tree__count {
    color: var(--tm-text-tertiary);
    font-size: var(--tm-font-xs);
}

.tm-data-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tm-cell-font-size);
    line-height: var(--tm-density-line-height);
}

.tm-data-grid thead th {
    height: var(--tm-row-height);
    padding: var(--tm-row-padding);
    border-bottom: 1px solid var(--tm-border-strong);
    color: var(--tm-text-secondary);
    font-size: var(--tm-header-font-size);
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: left;
    position: sticky;
    top: 0;
    background: var(--tm-surface);
    z-index: 1;
}

.tm-data-grid tbody td {
    height: var(--tm-row-height);
    padding: var(--tm-row-padding);
    border-bottom: 1px solid var(--tm-border);
    vertical-align: middle;
    color: var(--tm-text-primary);
}

.tm-data-grid tbody tr {
    cursor: pointer;
}

.tm-data-grid tbody tr:hover {
    background: var(--tm-surface-hover);
}

.tm-data-grid tbody tr.is-selected {
    background: var(--tm-surface-active);
}

.tm-data-grid__wrap {
    overflow: auto;
    max-height: 640px;
}

.tm-tabbar {
    display: flex;
    align-items: center;
    gap: 2px;
    border-bottom: 1px solid var(--tm-border);
    margin-bottom: var(--pg-sp-3);
    flex-wrap: wrap;
}

.tm-tabbar__item {
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    height: 34px;
    padding: 0 10px;
    font-size: 12px;
    color: var(--tm-text-secondary);
    cursor: pointer;
}

.tm-tabbar__item:hover {
    color: var(--tm-text-primary);
    background: var(--pg-color-bg);
}

.tm-tabbar__item.is-active {
    border-bottom-color: var(--tm-accent);
    color: var(--tm-accent);
    font-weight: 600;
}

.tm-muted {
    color: var(--tm-text-secondary);
    font-size: 12px;
}

.tm-modal-surface {
    width: min(920px, calc(100vw - 32px));
    padding: 24px;
    border-radius: calc(var(--pg-shell-card-radius, 14px) + 2px);
}

.tm-modal-surface--narrow {
    width: min(760px, calc(100vw - 32px));
}

.tm-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--pg-sp-4);
    margin-bottom: var(--pg-sp-4);
    flex-wrap: wrap;
}

.tm-modal-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--pg-sp-3);
}

.tm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--pg-shell-toolbar-gap, 8px);
    margin-top: var(--pg-sp-4);
    flex-wrap: wrap;
}

.tm-modal-body-scroll {
    max-height: 75vh;
    overflow-y: auto;
}

.tm-modal-body-scroll--compact {
    max-height: 65vh;
}

.tm-modal-body {
    display: grid;
    gap: 14px;
}

.tm-modal-body--form .form-group,
.tm-defect-modal__body .form-group {
    margin-bottom: 0;
    min-width: 0;
}

.tm-modal-body--form .form-row,
.tm-defect-modal__body .form-row {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: start;
    gap: 14px;
}

.tm-modal-body--form label,
.tm-defect-modal__body label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tm-text-secondary);
}

.tm-modal-body--form .form-control,
.tm-defect-modal__body .form-control {
    min-height: 42px;
    border-radius: 10px;
    border: 1px solid var(--tm-border-strong);
    background: var(--pg-color-surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.tm-modal-body--form textarea.form-control,
.tm-defect-modal__body textarea.form-control {
    min-height: 104px;
    padding-top: 10px;
    resize: vertical;
}

.tm-modal-body--form .form-control:focus,
.tm-defect-modal__body .form-control:focus {
    border-color: var(--tm-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tm-accent) 14%, white);
}

.tm-defect-modal__tabs {
    margin-bottom: 0;
}

.tm-defect-modal__section-head {
    margin: 4px 0 0;
    padding-top: 12px;
}

.tm-defect-modal__section-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--tm-text-secondary);
}

.tm-defect-modal__subsection {
    margin-top: 2px;
}

.tm-defect-modal__body h4 {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--tm-text-primary);
}

.tm-case-tabs,
.tm-case-wizard-tabs,
.tm-case-inline-actions,
.tm-trace-basket__row,
.tm-trace-basket__meta,
.tm-trace-detail__header,
.tm-trace-detail__actions {
    display: flex;
    flex-wrap: wrap;
}

.tm-case-tabs {
    gap: 4px;
    margin-bottom: var(--pg-sp-3);
    padding-bottom: var(--pg-sp-2);
    border-bottom: 1px solid #e0e0e0;
}

.tm-case-wizard-tabs {
    gap: var(--pg-shell-toolbar-gap, 8px);
    margin-bottom: var(--pg-sp-3);
}

.tm-case-section {
    margin-bottom: var(--pg-sp-3);
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}

.tm-case-section--soft {
    border-color: #e0ddd8;
    background: #fdfcfa;
    padding: 14px 16px;
}

.tm-case-section__title {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
}

.tm-case-section__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pg-shell-toolbar-gap, 8px);
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.tm-case-section__foot {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--pg-sp-3);
}

.tm-case-section__foot--split {
    justify-content: space-between;
}

.tm-suite-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: var(--pg-sp-2);
}

.tm-suite-chip {
    padding: 3px 8px;
    border: 1px solid #bfd6ff;
    border-radius: 999px;
    background: #e8f1ff;
    color: #1f3d7a;
}

.tm-inline-helper {
    font-size: 12px;
    color: #777;
}

.tm-inline-helper--danger {
    color: #c4314b;
}

.tm-inline-helper--muted {
    color: #666;
}

.tm-trace-basket {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tm-trace-basket__item {
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}

.tm-trace-basket__item--active {
    border-color: #9ec8ff;
}

.tm-trace-basket__row {
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.tm-trace-basket__select {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 260px;
    flex: 1;
}

.tm-trace-basket__meta {
    gap: 6px;
    align-items: center;
}

.tm-trace-basket__summary {
    font-size: 12px;
    color: #555;
}

.tm-trace-box {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    color: #334155;
}

.tm-trace-detail {
    padding: 10px;
    border: 1px solid #d7e7ff;
    border-radius: 8px;
    background: #f7fbff;
}

.tm-trace-detail__header {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.tm-trace-detail__title {
    font-size: 12px;
}

.tm-trace-detail__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.tm-trace-detail__actions {
    gap: 6px;
}

.tm-trace-detail__group {
    margin-top: 8px;
}

.tm-trace-detail__group--top {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #bfd6ff;
}

.tm-trace-detail__label {
    margin-bottom: 4px;
    font-size: 12px;
    color: #555;
}

.tm-trace-detail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tm-trace-tag {
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid #bfd6ff;
    background: #e8f1ff;
    color: #1f3d7a;
}

.tm-trace-tag--manual {
    border-color: #f5d48b;
    background: #fff7e6;
    color: #7a5100;
}

.tm-trace-tag__remove {
    margin-left: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.tm-trace-tag__remove--derived {
    color: #1f3d7a;
}

.tm-trace-tag__remove--manual {
    color: #7a5100;
}

.tm-derived-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 120px;
    overflow: auto;
    padding: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
}

.tm-derived-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #334155;
}

.tm-derived-row__status {
    margin-left: auto;
}

.tm-derived-row__status--covered {
    color: #107e3e;
}

.tm-derived-row__status--missing {
    color: #c4314b;
}

.tm-stat-grid {
    display: grid;
    gap: 8px;
}

.tm-stat-grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.tm-stat-grid--4 {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.tm-stat-card {
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
}

.tm-panel-divider {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
}

.tm-step-table {
    font-size: 13px;
}

.tm-step-table--compact {
    font-size: 12px;
}

.tm-step-cell-center {
    text-align: center;
    font-weight: 600;
}

.tm-step-form {
    margin-top: 8px;
    padding: 12px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background: #fafafa;
}

.tm-step-form__row,
.tm-step-form__actions,
.tm-inline-form-row {
    display: flex;
    gap: 8px;
}

.tm-step-form__row {
    margin-bottom: 8px;
}

.tm-step-form__actions {
    gap: 6px;
    justify-content: flex-end;
}

.tm-step-form__field--narrow {
    width: 60px;
}

.tm-step-form__field--wide {
    flex: 2;
}

.tm-step-form__field {
    flex: 1;
}

.tm-field-label {
    font-size: 11px;
    color: #666;
}

.tm-input--step-no {
    width: 40px;
    text-align: center;
}

.tm-empty-message {
    text-align: center;
}

.tm-empty-message--danger {
    color: #c4314b;
}

.tm-empty-message--muted {
    color: #999;
}

.tm-badge-pass {
    background: #107e3e;
    color: #fff;
}

.tm-badge-fail {
    background: #c4314b;
    color: #fff;
}

.tm-badge-blocked {
    background: #e9730c;
    color: #fff;
}

.tm-badge-related {
    background: #0070f3;
    color: #fff;
}

.tm-badge-data {
    background: #6a4fa0;
    color: #fff;
}

.tm-row-meta {
    font-size: 12px;
    white-space: nowrap;
}

.tm-meta-strip {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.tm-meta-copy {
    color: var(--sap-text-secondary);
}

.tm-meta-copy--subtle {
    font-size: 12px;
}

.tm-section-title {
    margin-bottom: 8px;
}

.tm-code {
    font-family: 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 500;
    color: #1e3a5f;
    letter-spacing: -0.2px;
}

.tm-badge-purpose {
    background: #6a4fa0;
    color: #fff;
}

.tm-badge-status-draft {
    background: #888;
    color: #fff;
}

.tm-badge-status-active {
    background: #0070f3;
    color: #fff;
}

.tm-badge-status-locked {
    background: #e9730c;
    color: #fff;
}

.tm-badge-status-archived {
    background: #555;
    color: #fff;
}

.tm-badge-info {
    background: #0a6ed1;
    color: #fff;
}

.tm-badge-warning {
    background: #e5a800;
    color: #111;
}

.tm-badge-dep-fail {
    background: #c4314b;
    color: #fff;
}

.tm-badge-dep-warn {
    background: #e9730c;
    color: #fff;
}

.tm-toolbar-count {
    font-size: 12px;
    color: #94a3b8;
}

.tm-inline-title {
    font-size: 13px;
    color: #0b1623;
}

.tm-inline-note {
    font-size: 11px;
    color: #999;
}

.tm-inline-note--push {
    margin-left: auto;
}

.tm-legend {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 11px;
    flex-wrap: wrap;
}

.tm-legend-badge--derived {
    background: #0a6ed1;
    color: #fff;
}

.tm-legend-badge--manual {
    background: #e5a800;
    color: #111;
}

.tm-legend-badge--missing {
    background: #c4314b;
    color: #fff;
}

.tm-stat-grid--2 {
    grid-template-columns: 1fr 1fr;
}

.tm-stat-grid__meta {
    color: #64748b;
}

.tm-stat-grid__accent--danger {
    color: #c4314b;
}

.tm-stat-grid__accent--success {
    color: #107e3e;
}

.tm-generated-copy {
    color: #666;
    margin-bottom: 12px;
}

.tm-generated-error {
    color: #c4314b;
}

.tm-selection-badge {
    font-size: 10px;
}

.tm-heading-reset {
    margin: 0;
}

.tm-empty-state-compact {
    padding: 30px;
}

.tm-grid-pad {
    padding: 8px;
}

.tm-plan-name-note {
    font-size: 11px;
    color: #64748b;
}

.tm-btn-analytics {
    background: #c08b5c;
    color: #fff;
}

.tm-block {
    margin-top: 8px;
}

.tm-block--sm {
    margin-top: 10px;
}

.tm-block--md {
    margin-top: 12px;
}

.tm-hidden-panel {
    display: none;
}

.tm-rule-hint {
    margin: 0 0 10px 0;
}

.tm-table-col-xs {
    width: 40px;
}

.tm-table-col-sm {
    width: 60px;
}

.tm-table-col-md {
    width: 70px;
}

.tm-table-col-lg {
    width: 90px;
}

.tm-table-col-xl {
    width: 100px;
}

.tm-inline-actions--tight {
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.tm-trace-detail-slot {
    margin-top: 10px;
}

.tm-select-wide {
    min-width: 260px;
}

.tm-select-medium {
    max-width: 340px;
}

.tm-stat-grid-gap {
    margin-bottom: 8px;
}

.tm-caption {
    font-size: 12px;
    color: #334155;
}

.tm-caption--strong {
    font-weight: 600;
}

.tm-caption--muted {
    color: #64748b;
}

.tm-caption--stack {
    margin-bottom: 6px;
}

.tm-status-line {
    margin-top: 8px;
    color: #475569;
}

.tm-status-line--dense {
    margin-bottom: 6px;
}

.tm-governance-title {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
}

.tm-dependency-heading {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 700;
}

.tm-dependency-heading--blocked {
    color: #c4314b;
}

.tm-dependency-heading--blocking {
    margin-top: 12px;
    color: #e9730c;
}

.tm-ai-result {
    display: grid;
    gap: var(--pg-sp-3);
    margin-top: var(--pg-sp-4);
}

.tm-card-shell {
    padding: 24px;
}

.tm-ai-card {
    padding: var(--pg-shell-card-pad, 16px);
    border: 1px solid var(--pg-color-slate-200);
    border-radius: 12px;
    background: #fff;
}

.tm-ai-card__header,
.tm-ai-card__badges {
    display: flex;
    gap: var(--pg-sp-3);
    flex-wrap: wrap;
}

.tm-ai-card__header {
    justify-content: space-between;
    align-items: flex-start;
}

.tm-ai-card__eyebrow {
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--pg-color-slate-500);
    text-transform: uppercase;
}

.tm-ai-card__eyebrow--stack {
    margin-bottom: 6px;
}

.tm-overflow-hidden {
    overflow: hidden;
}

.tm-text-success {
    color: #107e3e;
}

.tm-text-danger {
    color: #c4314b;
}

.tm-text-info {
    color: #0a6ed1;
}

.tm-text-muted {
    color: #999;
}

.tm-text-strong {
    font-weight: 600;
}

.tm-btn-success {
    background: #107e3e;
    color: #fff;
}

.tm-btn-danger-solid {
    background: #c4314b;
    color: #fff;
}

.tm-btn-primary-solid {
    background: #0070f3;
    color: #fff;
}

.tm-panel-head {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tm-panel-head__title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tm-panel-head__actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tm-panel-body-pad {
    padding: 8px;
}

.tm-panel-body-pad--top {
    padding: 8px;
    border-top: 1px solid #eef2f7;
}

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

.tm-inline-actions--md {
    gap: 12px;
}

.tm-inline-actions--spaced {
    margin-bottom: 12px;
}

.tm-inline-actions--lg {
    margin-bottom: 16px;
}

.tm-section-block {
    border-top: 2px solid #e0e0e0;
    margin-top: 16px;
    padding-top: 12px;
}

.tm-section-block__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.tm-section-heading {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.tm-section-heading--tight {
    margin-bottom: 4px;
}

.tm-section-heading--reset {
    margin: 0;
}

.tm-empty-copy {
    color: #999;
    font-size: 13px;
}

.tm-empty-copy--center {
    text-align: center;
}

.tm-meta-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.tm-criteria-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.tm-criteria-item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid #f0f0f0;
}

.tm-criteria-icon {
    font-size: 14px;
}

.tm-criteria-status--met {
    color: #107e3e;
}

.tm-criteria-status--unmet {
    color: #c4314b;
}

.tm-stack-spinner {
    margin: 8px auto;
}

.tm-modal-body-scroll--execution {
    max-height: 70vh;
}

.tm-step-select {
    width: 110px;
}

.tm-step-select--run {
    width: 100px;
}

.tm-input-fill {
    width: 100%;
}

.tm-table-col-result {
    width: 120px;
}

.tm-table-col-icon {
    width: 40px;
}

.tm-risk-grid {
    display: grid;
    gap: 12px;
}

.tm-risk-card {
    padding: 14px;
}

.tm-risk-card__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.tm-risk-card__title {
    font-size: 15px;
}

.tm-risk-card__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.tm-risk-card__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.tm-kpi-row {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.tm-kpi-value--success {
    color: #107e3e;
}

.tm-kpi-value--danger {
    color: #c4314b;
}

.tm-trace-btn {
    font-size: 11px;
}

.tm-score-banner {
    text-align: center;
    padding: 12px;
    margin-bottom: 16px;
    border: 2px solid;
    border-radius: 8px;
}

.tm-score-banner--go {
    background: rgba(16, 126, 62, 0.08);
    border-color: #107e3e;
}

.tm-score-banner--no-go {
    background: rgba(196, 49, 75, 0.08);
    border-color: #c4314b;
}

.tm-score-banner__value {
    font-size: 28px;
    font-weight: 700;
}

.tm-score-row--green {
    border-left: 4px solid #107e3e;
}

.tm-score-row--yellow {
    border-left: 4px solid #e5a800;
}

.tm-score-row--red {
    border-left: 4px solid #c4314b;
}

.tm-cell-pass {
    color: #107e3e;
}

.tm-cell-fail {
    color: #c4314b;
}

.tm-cell-blocked {
    color: #e9730c;
}

.tm-ai-card__body {
    margin-top: var(--pg-sp-3);
    display: grid;
    gap: var(--pg-sp-2);
}

.tm-ai-card__copy {
    font-size: 13px;
    color: #475569;
}

.tm-ai-card__steps {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 4px;
}

.tm-selection-shell {
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid var(--pg-color-slate-200);
    border-radius: var(--pg-radius-md);
    padding: var(--pg-sp-2);
}

.tm-selection-shell--compact {
    max-height: 300px;
}

.tm-selection-row {
    display: flex;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.tm-selection-row:last-child {
    border-bottom: none;
}

.tm-selection-toolbar {
    margin-bottom: var(--pg-sp-2);
}

.tm-inline-spinner {
    margin: 16px auto;
}

.tm-loading-panel {
    min-height: 180px;
}

@media (max-width: 768px) {
    .tm-modal-grid {
        grid-template-columns: 1fr;
    }
}

/* ── TMToolbar ──────────────────────────────────── */
.tm-toolbar__btn {
    min-height: var(--pg-shell-chip-height, 32px);
    padding: 0 10px;
    border: 1px solid var(--tm-border-strong);
    border-radius: var(--pg-radius-md);
    background: var(--tm-surface);
    color: var(--tm-text-primary);
    font-size: var(--tm-cell-font-size);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background var(--tm-transition-fast);
    white-space: nowrap;
}
.tm-toolbar__btn:hover { background: var(--tm-surface-hover); }
.tm-toolbar__btn--primary {
    background: var(--tm-accent);
    color: var(--tm-text-inverse);
    border-color: var(--tm-accent);
}
.tm-toolbar__btn--primary:hover { background: var(--tm-accent-hover); }
.tm-toolbar__icon { font-size: 14px; }
.tm-toolbar__search { width: 180px; }
.tm-toolbar__filter { min-height: var(--pg-shell-chip-height, 32px); font-size: 12px; }
.tm-toolbar__view-toggle { display: inline-flex; border: 1px solid var(--tm-border-strong); border-radius: var(--pg-radius-md); overflow: hidden; }
.tm-toolbar__view-btn { border: none; background: var(--tm-surface); width: 32px; height: 32px; cursor: pointer; font-size: 14px; }
.tm-toolbar__view-btn:hover { background: var(--tm-surface-hover); }
.tm-toolbar__view-btn.is-active { background: var(--tm-accent-light); color: var(--tm-accent); }

/* ── TMPropertyPanel ────────────────────────────── */
.tm-property-panel { font-size: var(--tm-cell-font-size); }
.tm-property-panel__section { border-bottom: 1px solid var(--tm-border); }
.tm-property-panel__section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--pg-sp-2) var(--pg-shell-toolbar-pad-x, 14px);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--tm-header-font-size);
    color: var(--tm-text-secondary);
    text-transform: uppercase;
    letter-spacing: .03em;
    user-select: none;
}
.tm-property-panel__section-header:hover { background: var(--tm-surface-hover); }
.tm-property-panel__chevron { font-size: 10px; width: 12px; text-align: center; }
.tm-property-panel__section.is-collapsed .tm-property-panel__section-body { display: none; }
.tm-property-panel__section-body { padding: 0 var(--pg-shell-toolbar-pad-x, 14px) var(--pg-sp-2); }
.tm-property-panel__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--tm-border);
}
.tm-property-panel__row:last-child { border-bottom: none; }
.tm-property-panel__label {
    width: 120px;
    flex-shrink: 0;
    color: var(--tm-text-secondary);
    font-size: var(--tm-header-font-size);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.tm-property-panel__value { color: var(--tm-text-primary); word-break: break-word; }
.tm-property-panel__input { flex: 1; }

/* ── TMStatusBadge ──────────────────────────────── */
.tm-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: var(--tm-font-xs);
    font-weight: var(--tm-fw-semibold);
    line-height: 1.6;
    white-space: nowrap;
    letter-spacing: var(--tm-ls-wide);
}
.tm-badge--md { padding: 2px 10px; font-size: var(--tm-font-sm); }

/* ── TMContextMenu ──────────────────────────────── */
.tm-context-menu {
    position: fixed;
    z-index: var(--tm-z-context-menu);
    min-width: 180px;
    max-width: 280px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--radius-md);
    box-shadow: var(--tm-shadow-lg);
    padding: 4px 0;
    font-size: var(--tm-cell-font-size);
}
.tm-context-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--tm-text-primary);
    transition: background var(--tm-transition-fast);
}
.tm-context-menu__item:hover { background: var(--tm-surface-hover); }
.tm-context-menu__item.is-disabled { opacity: .4; pointer-events: none; }
.tm-context-menu__icon { width: 16px; text-align: center; font-size: var(--tm-font-base); }
.tm-context-menu__label { flex: 1; }
.tm-context-menu__shortcut { color: var(--tm-text-tertiary); font-size: var(--tm-font-xs); margin-left: 16px; }
.tm-context-menu__divider { height: 1px; background: var(--tm-border); margin: 4px 8px; }

/* ── TMToast ────────────────────────────────────── */
.tm-toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: var(--tm-z-toast);
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
}
.tm-toast {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--radius-md);
    box-shadow: var(--tm-shadow-md);
    font-size: var(--tm-cell-font-size);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity var(--tm-transition-normal), transform var(--tm-transition-normal);
}
.tm-toast.is-visible { opacity: 1; transform: translateX(0); }
.tm-toast.is-leaving { opacity: 0; transform: translateX(20px); }
.tm-toast--success { border-left: 3px solid var(--tm-pass); }
.tm-toast--error   { border-left: 3px solid var(--tm-fail); }
.tm-toast--warning { border-left: 3px solid var(--tm-blocked); }
.tm-toast--info    { border-left: 3px solid var(--tm-accent); }
.tm-toast__icon { font-size: var(--tm-font-lg); flex-shrink: 0; }
.tm-toast--success .tm-toast__icon { color: var(--tm-pass); }
.tm-toast--error   .tm-toast__icon { color: var(--tm-fail); }
.tm-toast--warning .tm-toast__icon { color: var(--tm-blocked); }
.tm-toast--info    .tm-toast__icon { color: var(--tm-accent); }
.tm-toast__message { flex: 1; color: var(--tm-text-primary); }
.tm-toast__close {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--tm-text-tertiary);
    font-size: var(--tm-font-lg);
    padding: 0;
    line-height: 1;
}

/* ── TMModal ────────────────────────────────────── */
.tm-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--tm-z-modal-backdrop);
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tm-modal {
    background: var(--tm-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--tm-shadow-lg);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    opacity: 0;
    transform: scale(.96);
    transition: opacity var(--tm-transition-normal), transform var(--tm-transition-normal);
}
.tm-modal.is-visible { opacity: 1; transform: scale(1); }
.tm-modal--sm { width: 380px; }
.tm-modal--md { width: 540px; }
.tm-modal--lg { width: 720px; }
.tm-modal--xl { width: 960px; }
.tm-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tm-border);
}
.tm-modal__title { font-size: var(--tm-font-md); font-weight: var(--tm-fw-bold); color: var(--tm-text-primary); }
.tm-modal__close {
    border: none;
    background: none;
    cursor: pointer;
    font-size: var(--tm-font-xl);
    color: var(--tm-text-tertiary);
    padding: 0;
    line-height: 1;
}
.tm-modal__body { padding: 16px; overflow-y: auto; flex: 1; font-size: var(--tm-cell-font-size); }
.tm-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--tm-border);
}
.tm-modal__btn {
    height: 30px;
    padding: 0 14px;
    border: 1px solid var(--tm-border-strong);
    border-radius: var(--radius-sm);
    background: var(--tm-surface);
    color: var(--tm-text-primary);
    font-size: var(--tm-font-sm);
    cursor: pointer;
}
.tm-modal__btn--primary { background: var(--tm-accent); color: var(--tm-text-inverse); border-color: var(--tm-accent); }
.tm-modal__btn--primary:hover { background: var(--tm-accent-hover); }
.tm-modal__btn--danger { background: var(--tm-fail); color: var(--tm-text-inverse); border-color: var(--tm-fail); }

/* ── TMDropdownSelect ───────────────────────────── */
.tm-dropdown { position: relative; font-size: var(--tm-cell-font-size); }
.tm-dropdown__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--tm-border-strong);
    border-radius: var(--radius-sm);
    background: var(--pg-color-surface);
    cursor: pointer;
}
.tm-dropdown__display { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tm-text-primary); }
.tm-dropdown__arrow { font-size: var(--tm-font-2xs); color: var(--tm-text-tertiary); margin-left: 4px; }
.tm-dropdown__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--tm-z-dropdown);
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--tm-shadow-md);
    margin-top: 2px;
    max-height: 220px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.tm-dropdown__search { margin: 6px; width: calc(100% - 12px); }
.tm-dropdown__list { overflow-y: auto; flex: 1; }
.tm-dropdown__option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    cursor: pointer;
    transition: background var(--tm-transition-fast);
}
.tm-dropdown__option:hover { background: var(--tm-surface-hover); }
.tm-dropdown__option.is-selected { background: var(--tm-accent-light); color: var(--tm-accent); }
.tm-dropdown__check { font-size: var(--tm-font-md); }
.tm-dropdown__empty { padding: 12px; color: var(--tm-text-tertiary); text-align: center; }
.tm-dropdown__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.tm-dropdown__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--tm-accent-light);
    color: var(--tm-accent);
    border-radius: 999px;
    font-size: var(--tm-font-xs);
}
.tm-dropdown__tag-x { border: none; background: none; cursor: pointer; color: var(--tm-accent); font-size: var(--tm-font-sm); padding: 0; }

/* ── TMChartWidget ──────────────────────────────── */
.tm-chart-widget { background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: var(--radius-md); padding: 12px; }
.tm-chart-widget__title { font-size: var(--tm-font-base); font-weight: var(--tm-fw-semibold); color: var(--tm-text-primary); margin-bottom: 8px; }
.tm-chart-widget__canvas-wrap { position: relative; }
.tm-chart-widget__fallback { text-align: center; padding: 24px; }

/* ── TMStepEditor ───────────────────────────────── */
.tm-step-editor__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.tm-step-editor__title { font-size: var(--tm-font-base); font-weight: var(--tm-fw-bold); color: var(--tm-text-primary); }
.tm-step-editor__add { font-size: var(--tm-font-xs); }
.tm-step-editor__empty { padding: 24px; text-align: center; color: var(--tm-text-tertiary); font-size: var(--tm-font-sm); }
.tm-step-editor__num { font-weight: 700; color: var(--tm-text-secondary); text-align: center; }
.tm-step-editor__btn {
    border: none;
    background: none;
    cursor: pointer;
    padding: 2px 4px;
    font-size: var(--tm-font-md);
    color: var(--tm-text-secondary);
}
.tm-step-editor__btn:hover { color: var(--tm-accent); }
.tm-step-editor__btn--danger:hover { color: var(--tm-fail); }

/* ── TMRichTextEditor ───────────────────────────── */
.tm-rte { border: 1px solid var(--tm-border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.tm-rte--readonly { padding: 10px; font-size: var(--tm-cell-font-size); color: var(--tm-text-primary); line-height: 1.5; }
.tm-rte__toolbar {
    display: flex;
    gap: 2px;
    padding: 4px 6px;
    background: var(--tm-bg);
    border-bottom: 1px solid var(--tm-border);
    flex-wrap: wrap;
}
.tm-rte__btn {
    border: none;
    background: none;
    cursor: pointer;
    padding: 3px 6px;
    font-size: var(--tm-font-sm);
    font-weight: var(--tm-fw-semibold);
    color: var(--tm-text-secondary);
    border-radius: var(--radius-sm);
}
.tm-rte__btn:hover { background: var(--tm-surface-hover); color: var(--tm-text-primary); }
.tm-rte__sep { width: 1px; height: 18px; background: var(--tm-border); margin: 0 4px; align-self: center; }
.tm-rte__content {
    padding: 10px;
    font-size: var(--tm-cell-font-size);
    color: var(--tm-text-primary);
    line-height: 1.5;
    outline: none;
    min-height: 80px;
}
.tm-rte__content:empty::before {
    content: attr(data-placeholder);
    color: var(--tm-text-tertiary);
}
.tm-rte__content:focus { box-shadow: inset 0 0 0 1px var(--tm-accent); }

/* ── TMBreadcrumbBar ────────────────────────────── */
.tm-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--tm-cell-font-size);
    color: var(--tm-text-secondary);
}
.tm-breadcrumb__item {
    cursor: pointer;
    color: var(--tm-accent);
    text-decoration: none;
}
.tm-breadcrumb__item:hover { text-decoration: underline; }
.tm-breadcrumb__item.is-current {
    color: var(--tm-text-primary);
    cursor: default;
    font-weight: 600;
}
.tm-breadcrumb__sep { color: var(--tm-text-tertiary); font-size: var(--tm-font-2xs); }

/* ── F2: Side-by-side Diff Viewer ────────────────────────── */
.tm-diff-viewer { overflow-x: auto; }
.tm-diff-section { margin-top: var(--sp-md); }
.tm-diff-section__title {
    font-size: var(--tm-font-xs);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--tm-text-secondary);
    margin-bottom: var(--sp-xs);
}
.tm-diff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tm-font-sm);
    table-layout: fixed;
}
.tm-diff-table th {
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    font-size: var(--tm-font-xs);
    border-bottom: 2px solid var(--tm-border-strong);
    color: var(--tm-text-secondary);
}
.tm-diff-col-old { background: var(--pg-color-red-50); }
.tm-diff-col-new { background: var(--pg-color-green-50); }
.tm-diff-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--tm-border);
    vertical-align: top;
    word-break: break-word;
}
.tm-diff-field-name {
    font-weight: 600;
    font-size: var(--tm-font-xs);
    color: var(--tm-text-secondary);
}
.tm-diff-cell--removed {
    background: var(--pg-color-red-50);
    color: var(--pg-color-negative);
    text-decoration: line-through;
    text-decoration-color: var(--pg-color-red-600);
}
.tm-diff-cell--added {
    background: var(--pg-color-green-50);
    color: var(--pg-color-positive);
}
.tm-diff-cell--empty {
    background: var(--tm-surface);
    color: var(--tm-text-tertiary);
    text-align: center;
    font-style: italic;
}
.tm-diff-step-no {
    font-weight: 700;
    text-align: center;
    color: var(--tm-text-secondary);
    font-size: var(--tm-font-xs);
}
.tm-diff-step-content div {
    padding: 1px 0;
    font-size: var(--tm-font-xs);
}
.tm-diff-step-content strong {
    font-weight: 600;
    text-transform: capitalize;
    margin-right: 4px;
}
.tm-diff-row--removed td { border-left: 3px solid var(--pg-color-negative); }
.tm-diff-row--added td { border-left: 3px solid var(--pg-color-positive); }
.tm-diff-row--changed td { border-left: 3px solid var(--pg-color-warning); }

/* ── F3: Approval Status Banner & Stages ────────────────────── */
.tm-approval-banner {
    padding: var(--sp-sm) var(--sp-md);
    border: 1px solid var(--tm-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-md);
    font-size: var(--tm-font-sm);
}
.tm-approval-banner__icon { font-size: 18px; }
.tm-approval-banner__text { font-weight: 500; }
.tm-approval-banner--draft {
    background: var(--tm-surface);
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
}
.tm-approval-stages {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--sp-xs);
}
.tm-approval-stage {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
}
.tm-approval-stage__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Test Case Detail ────────────────────────────── */
.tm-case-detail__crumb {
    margin-bottom: var(--sp-sm);
}
.tm-case-detail__header {
    padding: var(--sp-md);
    margin-bottom: var(--sp-sm);
}
.tm-case-detail__header-top,
.tm-case-detail__title-row,
.tm-case-detail__meta,
.tm-case-detail__tree-head,
.tm-case-detail__tree-actions,
.tm-case-detail__group-items,
.tm-case-detail__history-head,
.tm-case-detail__history-actions,
.tm-case-detail__history-summary,
.tm-case-detail__suite-badges,
.tm-case-detail__section {
    display: flex;
    gap: var(--sp-sm);
    flex-wrap: wrap;
}
.tm-case-detail__header-top,
.tm-case-detail__tree-head,
.tm-case-detail__history-head {
    justify-content: space-between;
    align-items: center;
}
.tm-case-detail__title-row,
.tm-case-detail__meta,
.tm-case-detail__history-actions,
.tm-case-detail__history-summary,
.tm-case-detail__suite-badges {
    align-items: center;
}
.tm-case-detail__title {
    margin: 0;
    font-size: var(--tm-font-lg);
}
.tm-case-detail__subtitle,
.tm-case-detail__meta-copy,
.tm-case-detail__group-count,
.tm-case-detail__group-more,
.tm-case-detail__section-title,
.tm-case-detail__history-label,
.tm-case-detail__history-note {
    color: var(--tm-text-secondary);
}
.tm-case-detail__subtitle {
    font-size: var(--tm-font-sm);
}
.tm-case-detail__meta {
    margin-top: var(--sp-sm);
}
.tm-case-detail__meta-copy {
    font-size: var(--tm-font-xs);
}
.tm-case-detail__tree-shell {
    padding: 10px 12px;
    border-bottom: 1px solid var(--tm-border);
}
.tm-case-detail__tree-title {
    margin-bottom: 8px;
    font-size: var(--tm-font-sm);
    font-weight: 700;
}
.tm-case-detail__tab-body {
    padding: var(--sp-md);
}
.tm-case-detail__group {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
}
.tm-case-detail__group-list {
    max-height: 50vh;
    overflow: auto;
}
.tm-case-detail__group-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--tm-text-primary);
}
.tm-case-detail__group-title.is-selected {
    color: #1d4ed8;
}
.tm-case-detail__group-items {
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}
.tm-case-detail__group-link {
    justify-content: flex-start;
    text-align: left;
}
.tm-case-detail__approval {
    margin-bottom: var(--sp-sm);
}
.tm-case-detail__suite {
    margin-top: var(--sp-md);
}
.tm-case-detail__history-block {
    margin-bottom: var(--sp-md);
}
.tm-case-detail__suite-heading,
.tm-case-detail__history-heading,
.tm-case-detail__recent-title {
    margin-bottom: var(--sp-sm);
    font-size: var(--tm-font-sm);
    font-weight: 600;
}
.tm-case-detail__suite-heading {
    font-size: var(--tm-header-font-size);
    text-transform: uppercase;
}
.tm-case-detail__defects-block,
.tm-case-detail__audit {
    margin-bottom: var(--sp-md);
}
.tm-case-detail__history-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--sp-sm);
    align-items: end;
    margin-bottom: var(--sp-sm);
}
.tm-case-detail__history-field label {
    display: block;
    font-size: var(--tm-font-xs);
    color: var(--tm-text-secondary);
}
.tm-case-detail__history-field select {
    width: 100%;
}
.tm-case-detail__history-card {
    padding: var(--sp-md);
    margin-bottom: var(--sp-md);
}
.tm-case-detail__badge--fields { background: #e8f0fe; color: #174ea6; }
.tm-case-detail__badge--added { background: #e6f4ea; color: #137333; }
.tm-case-detail__badge--removed { background: #fce8e6; color: #a50e0e; }
.tm-case-detail__badge--changed { background: #fef7cd; color: #7c6900; }
.tm-case-detail__field-col { width: 120px; }
.tm-case-detail__step-col { width: 60px; }
.tm-case-detail__history-note {
    margin-bottom: var(--sp-sm);
}
.tm-case-detail__recent-grid {
    margin-top: var(--sp-sm);
}
.tm-case-detail__mini-btn {
    font-size: 11px;
}
.tm-case-detail__history-empty {
    margin: 0;
}