/* ============================================================================
   LCD — agents and benchmarks directories

   Both pages ship their own stylesheet (agents.css, benchmarks.css) with
   rounded pills, soft shadows and a per-category pastel palette. This maps
   them onto the key/chip vocabulary and the LCD colour ramp. Loaded after
   both, so it wins on equal specificity.
   ========================================================================= */

/* ------------------------------------------------------------ filter keys */

.agent-filter-btn,
.agent-deploy-btn,
.bench-filter-pill {
    border-radius: 0 !important;
    border: 1.5px solid var(--lcd-line) !important;
    background: var(--lcd-panel) !important;
    color: var(--lcd-fg) !important;
    box-shadow: var(--lcd-key-shadow) !important;
    font-family: var(--lcd-font-data) !important;
    font-size: var(--fs-key) !important;
    font-weight: 500 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 11px !important;
    transition: box-shadow .08s steps(2), transform .08s steps(2);
}

.agent-filter-btn:hover,
.agent-deploy-btn:hover,
.bench-filter-pill:hover {
    background: var(--lcd-panel) !important;
    color: var(--lcd-fg) !important;
    box-shadow: var(--lcd-key-shadow-hover) !important;
}

.agent-filter-btn.active,
.agent-deploy-btn.active,
.bench-filter-pill.active {
    background: var(--lcd-sel-bg) !important;
    color: var(--lcd-sel-fg) !important;
    border-color: var(--lcd-line) !important;
    box-shadow: none !important;
    transform: translate(1px, 1px);
}

.agent-filter-btn i,
.agent-deploy-btn i,
.bench-filter-pill i,
.agent-filter-btn:hover i,
.agent-deploy-btn:hover i,
.bench-filter-pill:hover i {
    color: inherit !important;
}

.agent-filter-btn.active i,
.agent-deploy-btn.active i,
.bench-filter-pill.active i {
    color: var(--lcd-sel-fg) !important;
}

.agent-filter-label,
.agent-quick-label {
    font-family: var(--lcd-font-data);
    font-size: var(--fs-micro);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lcd-fg-faint) !important;
}

/* ---------------------------------------------------------- category tags */
/* The pastel per-category palette does not survive the dark theme and does
   not read as one system. Categories keep their identity through the dot,
   which is recoloured to the LCD ramp; the badge itself becomes a chip. */

.agent_cat_badge,
.bench_cat_badge,
[class*="agent_cat_"],
[class*="bench_cat_"] {
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--lcd-fg-dim) !important;
    border: 1px solid var(--lcd-hair) !important;
    font-family: var(--lcd-font-data) !important;
    font-size: var(--fs-micro) !important;
    letter-spacing: .06em;
    padding: 2px 7px !important;
}

.cat-dot {
    border-radius: 0 !important;
    width: 7px !important;
    height: 7px !important;
    background: var(--lcd-fg-faint) !important;
}

/* Enough separation to tell categories apart, within the LCD ramp. */
.cat-dot-agent-framework,
.cat-dot-coding          { background: var(--lcd-link) !important; }
.cat-dot-agent-sdk,
.cat-dot-multi-agent     { background: var(--lcd-bad) !important; }
.cat-dot-ready-to-use-agent,
.cat-dot-web,
.cat-dot-self-hosted     { background: var(--lcd-ok) !important; }
.cat-dot-agent-platform,
.cat-dot-tool-use        { background: var(--lcd-accent) !important; }
.cat-dot-workflow-builder,
.cat-dot-computer-use,
.cat-dot-multimodal      { background: var(--lcd-fg-dim) !important; }
.cat-dot-reasoning       { background: var(--lcd-accent-bright) !important; }
.cat-dot-data-science,
.cat-dot-cloud           { background: var(--lcd-ok) !important; }
.cat-dot-safety          { background: var(--lcd-bad) !important; }

/* --------------------------------------------------------------- summary */

/* Agent tagline ("BLUF") strip — replaces the hardcoded white box that
   ignored the LCD palette on the detail page. */
.agent-bluf {
    max-width: 960px;
    padding: 12px 16px;
    background: var(--lcd-well);
    border: 1px solid var(--lcd-border);
    border-left: 3px solid var(--lcd-accent);
    box-shadow: var(--lcd-inset);
    color: var(--lcd-fg-dim);
    font-size: var(--fs-body);
    line-height: 1.6;
}

.agent-quick-grid,
.agent-feature-grid {
    gap: 10px;
}

.agent-quick-item {
    border-radius: 0 !important;
    border: 1px solid var(--lcd-border) !important;
    background: var(--lcd-well) !important;
    box-shadow: var(--lcd-inset) !important;
    gap: 10px;
    padding: 8px 14px;
}

.agent-quick-label {
    font-family: var(--lcd-font-data);
    font-size: var(--fs-micro) !important;
    font-weight: 500 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lcd-fg-faint) !important;
}

.agent-quick-value {
    font-family: var(--lcd-font-data);
    font-size: var(--fs-data-lg) !important;
    color: var(--lcd-fg) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.agent-feature-grid {
    margin: 12px 0 0;
}

/* Hardcoded bootstrap-green check / amber star glyphs -> LCD ramp. */
.agent-feature-grid .fa-check,
.agent-quick-value .fa-check,
#agentTable .fa-check {
    color: var(--lcd-ok) !important;
}

#agentTable .fa-star,
#agentTable_wrapper thead .fa-star {
    color: var(--lcd-accent) !important;
}

/* Benchmarks page stat row — legacy blue -> accent, rendered as LCD numerals. */
.bench-stat-num,
.bench_stat_num,
#benchStats strong,
#benchStats b {
    font-family: var(--lcd-font-lcd);
    font-size: var(--fs-num);
    line-height: 1;
    color: var(--lcd-accent) !important;
    text-shadow: var(--lcd-glow);
}

/* ------------------------------------------------------------- DataTables */
/* Both directories run their own DataTables instance without scrollX, so the
   generic table rules apply, but their sheets set explicit colours. */

#benchTable,
#agentTable {
    background: var(--lcd-panel);
}

#benchTable thead th,
#agentTable thead th {
    background: var(--lcd-well) !important;
    color: var(--lcd-fg) !important;
    border: 0 !important;
    box-shadow: inset 0 -1px 0 var(--lcd-border);
    font-family: var(--lcd-font-ui) !important;
    font-size: var(--fs-key) !important;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

#benchTable td,
#agentTable td {
    border: 0 !important;
    box-shadow: inset 0 -1px 0 var(--lcd-hair);
    font-family: var(--lcd-font-data);
    font-size: var(--fs-data);
    color: var(--lcd-fg);
}

/* These two run DataTables without scrollX, so a wide table pushes the whole
   document (76px past a 390px phone). Scroll it inside its own frame instead,
   matching the list page and the design's "horizontal scan" rule for mobile.
   llm.css forces `overflow: visible !important` on every .dataTables_wrapper so
   the list page's column dropdowns can escape their wrapper; these two use
   dom:'frtip' with no dropdowns inside, so overriding it here is safe. */
#benchTable_wrapper,
#agentTable_wrapper {
    border: 1px solid var(--lcd-border);
    background: var(--lcd-panel);
    overflow-x: auto !important;
    max-width: 100%;
}

/* --------------------------------------------------- toolbar / info rows */
/* dom:'frtip' renders the search row, info line and pagination flush against
   the frame; give each its own padded strip. */

#agentTable_wrapper .dataTables_filter,
#benchTable_wrapper .dataTables_filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 12px 14px;
    margin: 0;
    text-align: left;
    background: var(--lcd-well);
    box-shadow: inset 0 -1px 0 var(--lcd-border);
}

#agentTable_wrapper .dataTables_filter label,
#benchTable_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--lcd-font-data);
    font-size: var(--fs-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lcd-fg-faint);
}

#agentTable_wrapper .dataTables_filter input[type="search"] {
    width: 280px;
    max-width: 60vw;
    margin: 0 !important;
}

#agent-checkbox-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
}

#agent-checkbox-filters label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-family: var(--lcd-font-data);
    font-size: var(--fs-key);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lcd-fg-dim);
    white-space: nowrap;
    cursor: pointer;
}

#agent-checkbox-filters input[type="checkbox"] {
    margin: 0;
    accent-color: var(--lcd-sel-bg);
}

#agentTable_wrapper .dataTables_info,
#benchTable_wrapper .dataTables_info {
    padding: 12px 14px;
    font-family: var(--lcd-font-data);
    font-size: var(--fs-micro);
    letter-spacing: .08em;
    color: var(--lcd-fg-faint);
}

#agentTable_wrapper .dataTables_paginate,
#benchTable_wrapper .dataTables_paginate {
    padding: 10px 14px 12px;
}

/* -------------------------------------------------------- sort indicators */
/* The vendor sheet stacks two chevrons; use the single-glyph treatment from
   the list page so headers stay on one line. */

#agentTable thead th,
#benchTable thead th {
    position: relative;
    padding-right: 20px;
    white-space: nowrap;
}

#agentTable thead .sorting::before,
#agentTable thead .sorting_asc::before,
#agentTable thead .sorting_desc::before,
#benchTable thead .sorting::before,
#benchTable thead .sorting_asc::before,
#benchTable thead .sorting_desc::before {
    content: none !important;
}

#agentTable thead .sorting::after,
#agentTable thead .sorting_asc::after,
#agentTable thead .sorting_desc::after,
#benchTable thead .sorting::after,
#benchTable thead .sorting_asc::after,
#benchTable thead .sorting_desc::after {
    position: absolute;
    right: 6px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    font-family: var(--lcd-font-data);
    font-size: 9px;
    line-height: 1;
    opacity: 1 !important;
    color: var(--lcd-fg-ghost);
}

#agentTable thead .sorting::after,
#benchTable thead .sorting::after      { content: "\2195" !important; }
#agentTable thead .sorting_asc::after,
#benchTable thead .sorting_asc::after  { content: "\25B2" !important; color: var(--lcd-link); }
#agentTable thead .sorting_desc::after,
#benchTable thead .sorting_desc::after { content: "\25BC" !important; color: var(--lcd-link); }

/* ------------------------------------------------------------- hostings */

.hosting_list td {
    font-family: var(--lcd-font-data);
    font-size: var(--fs-data);
    box-shadow: inset 0 -1px 0 var(--lcd-hair);
}

.featured_host {
    top: 0;
}

/* other.css paints these gradient tiles; they have no place in the LCD look. */
[class^="linear_"],
[class*=" linear_"] {
    background: var(--lcd-well) !important;
    border: 1px solid var(--lcd-border);
    box-shadow: var(--lcd-inset);
}