/* Bancadas de teste (/admin/bancadas-teste) — faixa de status, tabela de Agents e diálogos de ensaio.

   Folha global (não isolada) de propósito: os diálogos são renderizados pelo MudDialogProvider, fora da
   árvore da página, e o isolamento de CSS do Blazor não alcança componentes MudBlazor. Tudo é prefixado
   por ts- e usa os tokens do tema (--tm-*), então tema claro/escuro vem de graça. Estado nunca é só cor:
   todo marcador .ts-state tem ícone e texto. */

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

.ts-soon {
    margin-left: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.8;
}

.ts-inline-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.ts-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

/* ---- marcadores de estado (ícone + texto + cor) ---- */

.ts-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
}

.ts-state-success { color: var(--tm-success); background-color: var(--tm-success-tint); }
.ts-state-warning { color: var(--tm-warning); background-color: var(--tm-warning-tint); }
.ts-state-danger { color: var(--tm-danger); background-color: var(--tm-danger-tint); }
.ts-state-info { color: var(--tm-primary); background-color: var(--tm-primary-tint); }
.ts-state-neutral { color: var(--tm-text-muted); background-color: var(--tm-secondary-tint); }

/* ---- faixa de status ---- */

.ts-status-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.ts-status-occupancy {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* A ocupação é uma frase (Agent, estado, unidade): no celular ela quebra linha. */
.ts-status-occupancy .ts-state {
    white-space: normal;
}

.ts-stale-tag {
    color: var(--tm-warning);
    font-weight: 600;
}

.ts-collectors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.ts-collector {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--tm-border);
    border-radius: 10px;
    background-color: var(--tm-surface);
}

.ts-collector > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ts-collector-state { font-weight: 600; font-size: 0.875rem; }
.ts-collector-hint { color: var(--tm-text-muted); font-size: 0.8125rem; }

.ts-collector-success { border-left: 4px solid var(--tm-success); }
.ts-collector-success .mud-icon-root { color: var(--tm-success); }
.ts-collector-warning { border-left: 4px solid var(--tm-warning); }
.ts-collector-warning .mud-icon-root { color: var(--tm-warning); }
.ts-collector-danger { border-left: 4px solid var(--tm-danger); }
.ts-collector-danger .mud-icon-root { color: var(--tm-danger); }
.ts-collector-neutral, .ts-collector-empty { border-left: 4px solid var(--tm-border); }
.ts-collector-neutral .mud-icon-root, .ts-collector-empty .mud-icon-root { color: var(--tm-text-muted); }

.ts-diagnostics {
    font-size: 0.8125rem;
    color: var(--tm-text-muted);
    padding: 8px 12px;
    border-radius: 8px;
    background-color: var(--tm-bg);
}

.ts-diagnostics p { margin: 0 0 4px; }

/* ---- tabela de Agents (kit .dash-table + .dash-table-fixed, como /admin/integradores) ---- */

.ts-agent-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

/* Motivos de bloqueio e "A bancada está em uso por ..." são frases: quebram linha em vez de rolar. */
.ts-agent-table .mud-table-body .mud-table-cell.cell-stack {
    white-space: normal;
}

.ts-agent-table .cell-line-wrap {
    display: block;
    white-space: normal;
    font-size: var(--type-table-meta);
    color: var(--tm-text-muted);
}

@media (min-width: 600px) {
    /* 1 Agent · 2 Cadastro · 3 Disponibilidade · 4 Última sessão · 5 Sessões · 6 Ações */
    .ts-agent-table th:nth-child(1), .ts-agent-table td:nth-child(1) { width: 20%; }
    .ts-agent-table th:nth-child(2), .ts-agent-table td:nth-child(2) { width: 11%; }
    .ts-agent-table th:nth-child(3), .ts-agent-table td:nth-child(3) { width: 21%; }
    .ts-agent-table th:nth-child(4), .ts-agent-table td:nth-child(4) { width: 19%; }
    .ts-agent-table th:nth-child(5), .ts-agent-table td:nth-child(5) { width: 7%; }
    .ts-agent-table th:nth-child(6), .ts-agent-table td:nth-child(6) { width: 22%; }
}

/* Celular: a linha vira cartão (DataLabel); as ações ficam à esquerda, na largura do cartão, e o
   paginador quebra linha em vez de empurrar a página para o lado. */
@media (max-width: 600px) {
    .ts-agent-actions { justify-content: flex-start; }

    .ts-agent-table .mud-table-pagination-toolbar {
        flex-wrap: wrap;
        height: auto;
        row-gap: 4px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

.ts-row-inactive td { opacity: 0.85; }
.ts-row-deleted td { opacity: 0.65; }

/* ---- diálogo de ensaio ---- */

.ts-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.ts-dialog-heading { min-width: 0; }

/* As etapas quebram linha: a atual nunca fica escondida numa rolagem lateral. */
.ts-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0 0 16px;
    list-style: none;
}

.ts-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--tm-border);
    border-radius: 999px;
    color: var(--tm-text-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.ts-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--tm-secondary-tint);
    font-weight: 600;
}

.ts-step-done { color: var(--tm-success); border-color: var(--tm-success); }
.ts-step-done .ts-step-index { background-color: var(--tm-success-tint); }
.ts-step-current { color: var(--tm-text); border-color: var(--tm-primary); font-weight: 600; }
.ts-step-current .ts-step-index { background-color: var(--tm-primary); color: #fff; }

.ts-step-panel {
    padding: 12px 0;
    border-top: 1px solid var(--tm-border);
}

.ts-step-panel:first-of-type { border-top: 0; }

.ts-step-title { font-weight: 600; margin-bottom: 4px; }

.ts-disclosure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--tm-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.ts-disclosure:focus-visible {
    outline: 2px solid var(--tm-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.ts-disclosure-body { padding: 8px 0 0 26px; }

.ts-table-scroll { overflow-x: auto; }

.ts-row-selected td { background-color: var(--tm-primary-tint); }

.ts-report-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Em telas pequenas o ensaio ocupa a tela inteira. */
@media (max-width: 599px) {
    .mud-dialog.ts-session-dialog {
        max-width: 100vw !important;
        width: 100vw;
        max-height: 100vh;
        height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .ts-disclosure-body { padding-left: 0; }
}

/* ---- ensaio sequencial (plano do ensaio sequencial §3) ---- */
.ts-seq-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ts-seq-board {
    padding: 4px 0;
    border-top: 1px dashed var(--tm-border);
}

.ts-seq-board:first-of-type { border-top: 0; }

.ts-seq-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-left: 32px;
}

.ts-seq-channel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--tm-border);
    border-radius: 999px;
    font-size: 0.8125rem;
    cursor: pointer;
    user-select: none;
}

.ts-seq-channel:has(input:checked) {
    border-color: var(--tm-primary);
    background-color: var(--tm-primary-tint);
}

.ts-seq-channel-warn { border-style: dashed; color: var(--tm-warning); }

.ts-seq-item-open td { background-color: var(--tm-warning-tint); }
.ts-seq-item-bad td { background-color: var(--tm-danger-tint); }

.ts-seq-report { margin-bottom: 12px; }

/* Credenciais do Agent de teste: valores legíveis, selecionáveis e copiáveis (plano de credenciais §3.1). */
.ts-credential-grid {
    display: grid;
    grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
    gap: 6px 12px;
    align-items: center;
}

.ts-credential-label { font-size: 0.875rem; color: var(--tm-text-muted); }

.ts-credential-value {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.ts-credential-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--tm-border);
    border-radius: 6px;
    background-color: var(--tm-surface);
    color: inherit;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 0.875rem;
}

.ts-credential-input:focus { outline: 2px solid var(--tm-primary); outline-offset: 1px; }

.ts-credential-copy-status { min-height: 1.25rem; margin-top: 4px; font-size: 0.8125rem; }

@media (max-width: 600px) {
    .ts-credential-grid { grid-template-columns: minmax(0, 1fr); }
}