/* index.css — styles specific to the Clients/Instances/Clusters page */
.pending-bar { margin-top: 8px; }
.pending-item { display: inline-block; background: #2d1f00; border: 1px solid #d29922; color: #d29922; font-size: 0.8em; padding: 3px 10px; border-radius: 4px; margin-right: 6px; margin-bottom: 4px; }
.pending-item .pending-host { color: #c9d1d9; }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.search-bar { display: flex; gap: 6px; align-items: center; }
.search-bar select, .search-bar input { background: #161b22; color: #c9d1d9; border: 1px solid #30363d; border-radius: 4px; padding: 4px 8px; font-size: 0.85em; }
.search-bar input { width: 200px; }
.search-bar input::placeholder { color: #484f58; }
.error-banner { background: #3d1f1f; border: 1px solid #f85149; color: #f85149; padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; display: none; }
table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
th { text-align: left; padding: 8px 10px; background: #161b22; color: #8b949e; font-weight: 600; text-transform: uppercase; font-size: 0.75em; letter-spacing: 0.05em; border-bottom: 1px solid #21262d; position: sticky; top: 0; cursor: pointer; user-select: none; white-space: nowrap; }
th:hover { color: #58a6ff; }
th.sorted { color: #c9d1d9; }
th .arrow { margin-left: 4px; }
td { padding: 8px 10px; border-bottom: 1px solid #21262d; }
tr:hover { background: #161b22; }
tr.disconnected { opacity: 0.55; }
tr.suspended { opacity: 0.75; background: #1a0a0a; }
tr.pending_approval { opacity: 0.85; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.box-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.85em; font-weight: 600; letter-spacing: 0.5px; }
.status-connected { background: #3fb950; }
.status-disconnected { background: #f85149; }
.status-suspended { background: #dc2626; }
.status-revoked { background: #8b0000; }
tr.revoked { opacity: 0.65; background: #1a0505; }
.status-pending_approval { background: #d29922; }
.empty { text-align: center; padding: 40px; color: #8b949e; }
.mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.9em; }
.right { text-align: right; }
.match { background: #2d4a22; }
tr.clickable { cursor: pointer; }
tr.detail-row { display: none; }
tr.detail-row.open { display: table-row; }
tr.detail-row td { padding: 12px 20px; background: #161b22; border-bottom: 2px solid #21262d; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 24px; }
.detail-grid .detail-item { font-size: 0.85em; }
.detail-grid .detail-label { color: #8b949e; font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.03em; }
.detail-grid .detail-value { color: #c9d1d9; font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.9em; word-break: break-all; }