/* css/triage-styles.css — Administration → Ticket Triage (triage.html) */

.loading { padding: 40px 20px; text-align: center; color: #666; }
.loading p { margin: 10px 0 0; font-size: 0.9rem; }
.spinner {
    width: 28px; height: 28px; margin: 0 auto;
    border: 3px solid #e0e0e0; border-top-color: #0d6efd;
    border-radius: 50%; animation: tg-spin 0.8s linear infinite;
}
@keyframes tg-spin { to { transform: rotate(360deg); } }

.tg-panel {
    padding: 18px;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}
.tg-panel h3 {
    margin: 0 0 6px;
    font-size: 1rem;
    color: #1a1a1a;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}
.tg-hint { font-size: 0.85rem; color: #666; margin: 0 0 14px; }
.tg-hint code {
    background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 4px; font-size: 0.92em;
}

/* A switch whose consequence is spelled out under it — these decide where real
   customer tickets go, so the label alone is not enough. */
.tg-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    cursor: pointer;
}
.tg-toggle + .tg-toggle { border-top: 1px solid #f0f0f0; }
.tg-toggle input { margin-top: 3px; flex: 0 0 auto; }
.tg-toggle span { font-size: 0.92rem; color: #1a1a1a; }
.tg-toggle em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 0.83rem;
    color: #6b6b6b;
}

.tg-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 16px;
}

/* ── Rules table ─────────────────────────────────────────────────────────── */
.table-container { overflow-x: auto; }
.tg-table { font-size: 0.86rem; }
.tg-table td { vertical-align: middle; }
.tg-table input[type="text"],
.tg-table select {
    width: 100%;
    min-width: 90px;
    padding: 5px 7px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.84rem;
}
.tg-table input[type="number"] {
    width: 56px; padding: 5px 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.84rem;
}
.tg-table tr.tg-off { opacity: 0.5; }
.tg-del {
    border: none; background: none; cursor: pointer;
    color: #a1160a; font-size: 1.1rem; line-height: 1; padding: 2px 6px;
}
.tg-del:hover { background: #fdecea; border-radius: 4px; }

.tg-none { padding: 20px; text-align: center; color: #888; font-size: 0.9rem; font-style: italic; }

.button-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.tg-save { margin: 4px 0 28px; }

.tg-warning {
    padding: 12px 14px;
    margin-bottom: 16px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #664d03;
    border-radius: 6px;
    font-size: 0.88rem;
}
.tg-warning code {
    background: rgba(0,0,0,0.07); padding: 1px 5px; border-radius: 4px;
}

/* Test and Run sit side by side in one cell. */
.tg-actions { white-space: nowrap; }
.tg-actions .btn + .btn { margin-left: 4px; }
.tg-run-row { margin-top: 10px; }

/* Procedure library connection state, under its switch. */
.tg-sop-status {
    margin: 2px 0 0 26px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    background: #f1f3f6;
    color: #444;
}
.tg-sop-status:empty { display: none; }
.tg-sop-status.tg-sop-ok  { background: #e6f4ea; color: #14663b; }
.tg-sop-status.tg-sop-err { background: #fdecea; color: #a1160a; }
.tg-sop-check { margin: 8px 0 16px 26px; }
.tg-sop-check .tg-hint { margin: 0; }

.tg-ref summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; color: #1a1a1a; }
.tg-patterns {
    margin: 10px 0 0;
    padding-left: 20px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: #555;
    line-height: 1.7;
}

@media (max-width: 640px) {
    .tg-table { font-size: 0.8rem; }
}

/* ── Junk rules and the dry-run tester ───────────────────────────────────── */
/* A destructive rule should be visible as one at a glance. */
.tg-table tr.tg-junk { background: #fff6f5; }
.tg-table tr.tg-junk .r-action { border-color: #e0a0a0; color: #a1160a; font-weight: 600; }

.tg-test {
    margin-top: 14px;
    padding: 12px 14px;
    background: #f4f6f9;
    border: 1px solid #e2e6ec;
    border-left: 4px solid #0d6efd;
    border-radius: 6px;
    font-size: 0.86rem;
    max-height: 340px;
    overflow: auto;
}
.tg-test ul { margin: 8px 0 0; padding-left: 20px; line-height: 1.7; }
.tg-test code {
    background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 4px; font-size: 0.92em;
}
.tg-test em { color: #888; font-style: normal; font-size: 0.9em; }
.tg-test p { margin: 8px 0 0; color: #666; }

/* Red when the preview is for a rule that would close tickets. */
.tg-test-danger {
    background: #fdecea;
    border-color: #f5c6c0;
    border-left-color: #a1160a;
}