/*
 * RocketCode\Uplink\Filament\Resources\AiModelResource's own stylesheet —
 * the models table and its list-page header.
 *
 * 🔴 WHY THIS FILE EXISTS, AND WHY IT IS NOT IN THE HOST. Every rule below
 * used to live in the PLATFORM's own `resources/systems/css/theme.css`,
 * while the markup that needs it ships in this package. Measured on a real
 * deployment, 2 October: demo-uplink, and every product this platform
 * generates, rendered `filters.blade.php` and `columns/model.blade.php` as
 * bare markup — the tab rows collapsed onto two unstyled lines, the search
 * field lost its frame. The operator's own words, with a screenshot: "dit
 * breekt op dit moment voor alle packages". A package cannot edit its
 * host's theme file, and asking every host to paste rules into one is a
 * convention that rots silently, so the package ships its own stylesheet
 * and `Filament\Support\Facades\FilamentAsset` serves it — the same
 * mechanism `UplinkPlugin` already uses for the Vue chat bundle.
 *
 * Authored here rather than built: this is plain CSS with no Tailwind
 * utilities, no `@apply` and no build step, so it lives under
 * `resources/css/` rather than `resources/dist/` (which holds what
 * `vite.config.mjs` produces). `php artisan filament:assets` copies it
 * verbatim into the host's `public/css/rocketcode/uplink/`.
 *
 * 🔴 No Tailwind utility prefixes anywhere below, deliberately — see
 * `filters.blade.php`'s own docblock: this markup can render inside ANY
 * host panel that installs `UplinkPlugin`, so it may assume nothing about
 * which Tailwind build, if any, is scanning it. Colours come from
 * Filament's own panel custom properties (`--primary-*`, `--gray-*`,
 * `--font-mono`), which every panel defines at runtime, so one rule reads
 * correctly in light and dark and under whichever primary a host themed
 * its panel with.
 *
 * The design: https://claude.ai/artifact/1xUcwanex5bCw66SFQ3XeD —
 * artboards "Voorstel — 1440" and "Voorstel — 880".
 * `docs/wireframes/platform/ai-models-table.html` is the in-repo
 * reference that carries the same measurements for a branch with no
 * network.
 */

/*
 * AI Models (RocketCode\Uplink\Filament\Resources\AiModelResource):
 * a row at least one agent's own `model` references carries TWO signals
 * — a left rule AND a tinted background — so it is
 * recognisable in every state/kind view (including "All") without relying
 * on the rule alone, which is not enough on its own once rows of every
 * state render side by side. Same precedent as `App\Filament\MissionControl\
 * Resources\RunnerResource`'s own `.rc-runner-tile`
 * (`resources/mission-control/css/theme.css`) — a named class plus
 * ->recordClasses(), not a raw Tailwind utility string — and
 * var(--primary-500) plus a color-mix() against it rather than literal
 * colours, so both signals track whichever primary this panel is themed
 * with, in both light and dark (color-mix with the current colour-space
 * needs no separate .dark override, unlike a hardcoded rgba()).
 */
/*
 * Corrected: this used to read `.fi-ta-record.rc-ai-model-in-use`, which
 * never matched anything — this Filament version's own table row carries
 * `fi-ta-row`, not `fi-ta-record` (confirmed against
 * `vendor/filament/tables/resources/views/index.blade.php`, which renders
 * exactly `fi-ta-row` on every `<tr>`) — so an "in use" row rendered with
 * NO rule, border or background alike, measured directly: both read
 * `rgba(0, 0, 0, 0)`/`0px` against a live render. This is what the
 * ticket's own production re-measurement reported (AC5: "een rij
 * waarvan het model in gebruik is heeft exact dezelfde achtergrond als
 * een gewone rij... en er is geen indigo staaf") — a real regression, not
 * a stale reading.
 */
.fi-ta-row.rc-ai-model-in-use {
    border-inline-start: 4px solid var(--primary-500);
    background-color: color-mix(in oklch, var(--primary-500) 6%, transparent);
}

/*
 * AiModelResource's own list page header (ListAiModels): one left-aligned
 * tab bar (state tabs, a divider, then kind tabs),
 * then the tag search. Hand-written markup rather than `x-filament::tabs`
 * — see filters.blade.php's own docblock for why Filament's own tabs
 * component (centered pill rows, no underline) is exactly what this
 * replaces.
 *
 * Colour choices below lean on `currentColor`/`opacity`/`color-mix()`
 * rather than a specific Filament gray-scale step, deliberately: the
 * design's own rationale table says "Geen eigen kleuren" — the screen
 * adds nothing to the panel's own palette — and an opacity/color-mix
 * blend against whatever text/primary colour the panel already resolved
 * reads correctly in both light and dark with no second, theme-specific
 * rule to maintain.
 */
.rc-ai-model-filters {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    /*
     * Inset from the card's own edges rather than flush against them — operator
     * decision, 2026-10-02: "Knijp alles ook niet zo dicht op de randen van de
     * div". Measured on the running page before and after: this block used to
     * start at the card's own x (602px) with zero padding while the table's first
     * header cell started at 621px, so the header read as pasted onto the card and
     * the table as inset from it. 1.25rem puts the search field's left edge at
     * 622px — one pixel off the "Model" header's own text — so everything inside
     * the card starts on one line. An absolute value, not a `--spacing` multiple:
     * the host sets `--spacing: 0.2rem` globally, which is exactly what squeezed
     * this to nothing in the first place.
     */
    padding-block: 1.25rem;
    padding-inline: 1.25rem;
}

.rc-ai-model-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 0.125rem;
    border-bottom: 1px solid color-mix(in oklch, currentColor 12%, transparent);
}

.rc-ai-model-tabs-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.rc-ai-model-tabs-divider {
    width: 1px;
    height: 1.125rem;
    margin-inline: 0.375rem;
    background-color: color-mix(in oklch, currentColor 20%, transparent);
}

.rc-ai-model-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25rem;
    padding: 0.625rem 0.625rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: inherit;
    opacity: 0.65;
    cursor: pointer;
}

.rc-ai-model-tab:hover {
    opacity: 0.85;
}

.rc-ai-model-tab-active {
    opacity: 1;
    border-bottom-color: var(--primary-600);
}

.rc-ai-model-tab-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: var(--primary-500);
    flex-shrink: 0;
}

/*
 * "Models table: four blocks that reflow, instead of eleven columns that
 * squeeze" (https://claude.ai/artifact/1xUcwanex5bCw66SFQ3XeD).
 *
 * 🔴 No column widths and no breakpoint any more. The table used to carry
 * "Kan" and "Prijs in / uit" as 150px columns at `lg` and up, swapping to
 * the Model cell's own inline facts below it — two shapes and a media query
 * between them. Operator decision, 2026-10-02: the narrow shape IS the
 * shape, at every width ("Alles moet de 880-vorm krijgen, ook breed"), so
 * both columns are gone and the inline facts simply always render. "Model"
 * carries no width at all and grows into whatever "Actief" does not claim,
 * which is what keeps the row growing taller instead of the columns
 * growing narrower.
 */
/*
 * Widened from 130px — this column is the table's LAST ONE
 * (`sm:last-of-type:pe-6`, `header-cell.css`), so its own header cell
 * carries 1.5rem (24px) of end padding, not the 0.75rem (12px) `px-3`
 * every other header gets, on top of its own 0.75rem start padding: 36px
 * of padding against a 130px box left only ~94px for the text itself.
 * "Beschikbaar" (11 characters, text-sm/font-semibold) does not reliably
 * fit in that, which is exactly the measured defect — the header broke
 * mid-word ("Beschikbaa" / "r"). 170px leaves ~134px for the text, which
 * does fit on one line, with headroom rather than a pixel-exact fit.
 */
.rc-ai-model-col-available {
    width: 170px;
}

/*
 * The one remaining fixed header. Its label wraps BETWEEN words rather
 * than spilling into its neighbour — but "Beschikbaar" is one word, so
 * wrapping never has a between-words opportunity to take, and the old
 * `overflow-wrap: anywhere` rule let it break INSIDE the word instead the
 * moment the box got even slightly tight (see the width comment above).
 * `word-break: keep-all` refuses that break point outright: with the
 * width now sized to fit the word, this renders on one line; if a host
 * theme or translation ever made the label genuinely too long for the
 * box, it overflows the cell rather than ever splitting the word — the
 * AC this column exists to satisfy is "no header breaks mid-word", and an
 * overflow is visible and fixable in a way a silent mid-word break is
 * not.
 */
.rc-ai-model-col-available.fi-ta-header-cell {
    white-space: normal;
    overflow-wrap: normal;
    word-break: keep-all;
}

/*
 * The "Model" column's own cell (columns/model.blade.php) — name, orq.ai
 * id, origin chips, (in-use row) agent names, and — below `lg` only — the
 * inline price/capability/observed facts "Kan"/"Price" carry above it.
 */
.rc-ai-model-name-cell {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.rc-ai-model-name-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.rc-ai-model-name {
    font-size: 0.8125rem;
    font-weight: 600;
}

.rc-ai-model-id {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    opacity: 0.65;
}

/*
 * Price, unit, capability and the measured rate — one line inside the Model
 * cell, at every width. It used to be `display: none` above `lg`, where two
 * real columns carried the same facts; those columns are gone (see the
 * comment where their widths used to be), so this is simply always on.
 */
.rc-ai-model-inline-facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
}

.rc-ai-model-inline-price {
    font-family: var(--font-mono);
}

.rc-ai-model-inline-capability,
.rc-ai-model-inline-unit {
    opacity: 0.65;
}

/*
 * Amber, not muted grey: a drift is a signal, and a signal that reads like
 * the labels beside it is not one. `--warning-500` is Filament's own panel
 * token, so this tracks whichever warning colour a host themed its panel
 * with.
 */
.rc-ai-model-inline-observed {
    font-family: var(--font-mono);
    color: var(--warning-500);
}

/*
 * The three origin chips (provider / vendor_jurisdiction / residency) —
 * "a property of what the model IS, not a separate subject"
 * (docs/wireframes/platform/ai-models-table.html) — plus the referencing
 * agent names, at every width.
 */
/*
 * The three origin chips and, on an in-use row, the agent names — one line,
 * never two. `nowrap` plus an ellipsis on the agent list is deliberate: a
 * popular model can be referenced by far more agents than fit, and letting
 * that list wrap made one row 77px tall against its neighbours' 51px
 * (measured, 1728px wide), which is exactly the ragged shape the design does
 * not have. The full list stays available to a screen reader through the
 * `fi-sr-only` sentence the partial renders beside it.
 */
.rc-ai-model-chips {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.375rem;
    min-width: 0;
}

.rc-ai-model-chip {
    font-size: 0.6875rem;
    color: var(--gray-500);
    background-color: color-mix(in oklch, currentColor 7%, transparent);
    border: 1px solid color-mix(in oklch, currentColor 12%, transparent);
    border-radius: 0.375rem;
    padding: 0.125rem 0.375rem;
}

.rc-ai-model-agents {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--primary-600);
    /*
     * Not nowrap (the design's own `.agents{white-space:nowrap}` mockup —
     * a deliberate, documented departure from it): the referencing-agent
     * list is unbounded — a popular model can be referenced by far more
     * than the design mockup's own three agents — and AC2's own "must not
     * scroll" takes priority over keeping an arbitrarily long list on a
     * single visual line. `min-width: 0` plus `flex-wrap: wrap` on the
     * parent cell already let this span drop to its own line; letting IT
     * wrap too (rather than forcing the column wider) is what keeps a
     * model with many agents from reopening the same overflow this
     * resource's layout exists to close.
     */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * `rc-ai-model-filters-tags` lays the removed-tag chips and "Clear all"
 * link out in a wrapping row, matching the filter-indicator row Filament's
 * own table header already renders for its native filters
 * (`vendor/filament/tables/resources/views/index.blade.php`).
 * `rc-ai-model-filters-label` is the "Filters" caption ahead of the chips
 * (docs/wireframes/uplink/models.html point 9).
 */
.rc-ai-model-filters-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.rc-ai-model-filters-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.65;
}

.rc-ai-model-filters-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rc-ai-model-filters-search > :first-child {
    flex: 1 1 auto;
}

/*
 * The search field and its add-filter button, matching the design's own 1440
 * artboard (https://claude.ai/artifact/1xUcwanex5bCw66SFQ3XeD). The active-filter
 * chips stay on their own row BELOW the field — operator decision, 2026-10-02:
 * the artboard draws them beside it, and that was tried in the browser and
 * rejected ("Filters onder de zoekbalk"). They keep the pill shape the artboard
 * gives them.
 *
 * 🔴 The field needs these three rules because of a HOST decision, not a Filament
 * default: `resources/systems/css/theme.css` sets `--spacing: 0.2rem` globally to
 * tighten the panel, which collapsed this input to 4.8px/9.6px of padding with no
 * radius at all — measured on the running page, where it read as a bare box rather
 * than a field. Stated in absolute units so the field keeps the design's own frame
 * whatever density a consuming host chooses; everything else in this file still
 * inherits the host's scale.
 */
.rc-ai-model-filters-search .fi-input-wrp {
    border-radius: 0.625rem;
}

.rc-ai-model-filters-search .fi-input {
    padding-block: 0.75rem;
    padding-inline: 1rem;
    font-size: 0.875rem;
}

.rc-ai-model-filters-tags .fi-badge {
    border-radius: 9999px;
    padding-block: 0.4375rem;
    padding-inline: 0.75rem;
    font-size: 0.8125rem;
}

/*
 * 'plain' mode only — Filament's own table search, given the same frame as the
 * chip field it replaces.
 *
 * 🔴 Scoped on `:has(.fi-ta-search-field)`, which is present only when the host
 * configured `uplink.filament.search.ai_model` to 'plain': in 'tags' mode
 * Filament's search is off, there is no such element, and none of this applies.
 * The chip layout is untouched — operator decision, 2026-10-05, after seeing
 * the same treatment applied there: "huidige styling voor de chips is beter".
 *
 * Three rules, and each exists for a measured reason rather than a hunch:
 *
 *  - Filament wraps the search field and the column manager in an unclassed
 *    `flex: 0 1 auto` box, so the field could not grow past its own content
 *    however much it asked for — measured at 202px against the chip field's
 *    1060px.
 *  - That toolbar also carries an EMPTY actions box which still spends the
 *    toolbar's own gap, leaving the field starting 12px right of the tabs
 *    above it. `:empty` does not match it (it contains whitespace);
 *    `:not(:has(*))` — no element children — does.
 *  - The field itself is squeezed to 4.8px/9.6px with no radius by the host's
 *    global `--spacing: 0.2rem`, the same density that flattened the chip
 *    field, so the frame is restated in absolute units.
 *
 * The column manager stays on this row rather than taking one of its own: that
 * costs the field 28px nobody sees and saves a 48px row that held a 16px icon.
 */
.fi-ta:has(.rc-ai-model-filters) .fi-ta-header-toolbar:has(.fi-ta-search-field) {
    padding-inline: 1.25rem;
    padding-block: 0 1.25rem;
}

.fi-ta:has(.rc-ai-model-filters) .fi-ta-header-toolbar:has(.fi-ta-search-field) > .fi-ta-actions:not(:has(*)) {
    display: none;
}

.fi-ta:has(.rc-ai-model-filters) .fi-ta-header-toolbar > div:has(> .fi-ta-search-field) {
    flex: 1 1 auto;
    align-items: center;
    gap: 0.75rem;
}

.fi-ta:has(.rc-ai-model-filters) .fi-ta-search-field {
    flex: 1 1 auto;
    max-width: none;
}

.fi-ta:has(.rc-ai-model-filters) .fi-ta-search-field .fi-input-wrp {
    border-radius: 0.625rem;
}

.fi-ta:has(.rc-ai-model-filters) .fi-ta-search-field .fi-input {
    padding-block: 0.75rem;
    padding-inline: 1rem;
    font-size: 0.875rem;
}