/* Agent Directory Styles */

/* Category badges — soft pastel colors */
.agent_cat_badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: smaller;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid;
}

.agent_cat_agent-framework { background: #eef3ff; color: #4a6fa5; border-color: #d6e2f5; }
.agent_cat_agent-sdk { background: #fef0ef; color: #b85450; border-color: #f5d6d4; }
.agent_cat_ready-to-use-agent { background: #eef7f0; color: #4a8c5c; border-color: #d4ebd9; }
.agent_cat_agent-platform { background: #fef6e8; color: #9a7030; border-color: #f0e0c0; }
.agent_cat_workflow-builder { background: #f4eefa; color: #7a52a0; border-color: #e0d0f0; }
.agent_cat_coding-agent { background: #f0f1f3; color: #5a5e64; border-color: #dcdfe3; }

/* Agent list page */
.agent-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.agent-filter-pill {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none;
    border: 1px solid #ddd;
    color: #555;
    transition: all 0.2s;
}

.agent-filter-pill:hover, .agent-filter-pill.active {
    background: #1a73e8;
    color: #fff;
    border-color: #1a73e8;
    text-decoration: none;
}

.agent-filter-pill i {
    margin-right: 4px;
}

/* Deployment type pills — smaller secondary row */
.agent-deploy-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 12px;
    text-decoration: none;
    border: 1px solid #ddd;
    color: #666;
    transition: all 0.2s;
}

.agent-deploy-pill:hover, .agent-deploy-pill.active {
    background: #555;
    color: #fff;
    border-color: #555;
    text-decoration: none;
}

.agent-deploy-pill i {
    margin-right: 3px;
}

/* Feature badges on detail page */
.agent-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin: 16px 0;
}

.agent-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 14px;
    background: #f8f9fa;
}

.agent-feature-item.feat-yes {
    color: #137333;
}

.agent-feature-item.feat-no {
    color: #bbb;
}

.agent-feature-item .fa-check-circle {
    color: #34a853;
}

.agent-feature-item .fa-times-circle {
    color: #ddd;
}

/* Pros / cons */
.agent-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 16px 0;
}

@media (max-width: 768px) {
    .agent-pros-cons {
        grid-template-columns: 1fr;
    }
}

.agent-pros h3, .agent-cons h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}

.agent-pros li {
    color: #137333;
    margin-bottom: 4px;
}

.agent-cons li {
    color: #c5221f;
    margin-bottom: 4px;
}

/* Agent detail info table — inherit table-sm1 sizing */
.agent-info-table td {
    padding: 6px 10px;
    vertical-align: top;
}

.agent-info-table td:first-child {
    font-weight: 600;
    color: #555;
    width: 180px;
    white-space: nowrap;
}

/* Similar agents */
.agent-similar-card {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #eae3dc;
    border-radius: 5px;
    margin-right: 8px;
    margin-bottom: 8px;
}

.agent-similar-card a {
    font-weight: 600;
    text-decoration: none;
    color: #8c7e6c;
}

.agent-similar-card:hover {
    background: #eae3dc;
}

.agent-similar-diff {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

/* DataTable overrides for agent list */
#agentTable th,
#agentTable td {
    vertical-align: middle;
}

#agentTable_wrapper .dataTables_filter {
    margin-bottom: 10px;
}

/* Homepage agent section */
.agent-home-section {
    margin-bottom: 30px;
}

.agent-home-section h2 {
    font-size: 18px;
    margin-bottom: 12px;
}

/* Dark theme overrides */
.dark_theme .agent-cat_badge {
    border-color: #444;
}

.dark_theme .agent-feature-item {
    background: #252525;
}

.dark_theme .agent-feature-item.feat-no {
    color: #555;
}

.dark_theme .agent-similar-card {
    border-color: #464646;
}

.dark_theme .agent-similar-card a {
    color: #dedede;
}

.dark_theme .agent-similar-card:hover {
    background: #524944;
}

.dark_theme .agent-filter-pill {
    border-color: #444;
    color: #aaa;
}

.dark_theme .agent-filter-pill:hover,
.dark_theme .agent-filter-pill.active {
    background: #1a73e8;
    color: #fff;
    border-color: #1a73e8;
}