/* =========================================
   Client Agent — Additional Styles
   (Extends virtual-actor.css base styles)
   ========================================= */

/* ---- Status indicators ---- */
.status-online {
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

.status-offline {
    background: #6b7280;
}

.status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* ---- Capability tags — Details page ---- */
.capabilities-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.capability-tag {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 99px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

[data-theme="light"] .capability-tag {
    color: #4f46e5;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
}

/* Capability tags — Index card (smaller) */
.capability-tag-sm {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: rgba(99, 102, 241, 0.1);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 600;
}

[data-theme="light"] .capability-tag-sm {
    color: #4f46e5;
}

/* ---- Card link wrapper (Index page) ---- */
.actor-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.actor-card-link:hover {
    color: inherit;
    text-decoration: none;
}

/* ---- Filter buttons for Online/Offline ---- */
.filter-btn[data-target="all"].active {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

.filter-btn[data-target="online"].active {
    background: linear-gradient(135deg, #10b981, #059669);
}

.filter-btn[data-target="offline"].active {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

/* ---- Details — Avatar wrapper ---- */
.ca-avatar-wrap {
    margin-bottom: 2rem;
}

/* ---- Details — Action bar ---- */
.ca-action-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ca-btn-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.2rem;
    border-radius: 99px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: opacity 0.2s;
}

.ca-btn-edit:hover {
    opacity: 0.85;
    color: #fff;
}

.ca-btn-deactivate {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.2rem;
    border-radius: 99px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: opacity 0.2s;
}

.ca-btn-deactivate:hover {
    opacity: 0.85;
}

.ca-form-inline {
    display: inline;
}

/* ---- Details — Semantic text colors ---- */
.ca-text-online {
    color: #10b981;
}

.ca-text-offline {
    color: #6b7280;
}

.ca-text-danger {
    color: #ef4444;
}

.ca-text-id {
    font-size: 0.8rem;
    word-break: break-all;
}