/*
 * Resource Surfaces spike — layout stabilisers.
 *
 * Filament gates the leading record-actions <th> behind `@if (count($records))`
 * (vendor/filament/tables/.../index.blade.php), so an empty/filtered-to-nothing
 * table drops the "Actions" header and every column label shifts left by one
 * cell. We can't edit the vendor view, so instead we pin the actions column to a
 * fixed width when populated and reserve that same width on the first header cell
 * when the empty state is showing — keeping the columns from shifting.
 */
.fi-ta:not(:has(.fi-ta-empty-state)) .fi-ta-table thead .fi-ta-header-cell:first-child {
    width: 5.5rem;
}

.fi-ta:has(.fi-ta-empty-state) .fi-ta-table thead .fi-ta-header-cell:first-child {
    padding-inline-start: 5.5rem;
}

/*
 * Fixed column widths. Without this, auto table-layout sizes each column to its
 * widest cell — so picking an enum filter (Filament's multiselect control is
 * intrinsically ~16rem) stretches an otherwise-narrow column. table-layout:fixed
 * makes every column honour the width we set in ModelSchema, regardless of filter
 * state, so columns never jump. Overflowing data cells get an ellipsis (full value
 * is available on hover via the column tooltips + in the detail view).
 */
.fi-ta-table {
    table-layout: fixed;
}
.fi-ta-table tbody .fi-ta-cell .fi-ta-col-wrp {
    min-width: 0;
}
.fi-ta-table tbody .fi-ta-text-item-label,
.fi-ta-table tbody .fi-ta-cell .fi-ta-text > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Header filter polish.
 *
 * #3 Operator lives in a compact, always-visible icon-menu (`has`, `≥`, …) placed
 * inline before the value input. Filters that have an operator (`.op` partial) lay
 * their controls out side by side: operator auto-width, value fills the rest.
 */
.fi-ta-header-filter .fi-grid:has([wire\:partial$=".op"]) {
    grid-template-columns: 2.5rem minmax(0, 1fr) !important;
    align-items: center;
    gap: 0.375rem !important;
}

/* Make the operator control fill its (fixed-width) grid cell so every operator
   box is the same width and the value inputs line up. Filament puts a 64px
   min-width on every .fi-grid-col, so the operator cell is overridden to 0 to let
   it shrink to the snug 2.5rem track. */
.fi-ta-header-filter .fi-grid-col[wire\:partial$=".op"] {
    min-width: 0 !important;
}
.fi-ta-header-filter [wire\:partial$=".op"],
.fi-ta-header-filter [wire\:partial$=".op"] .fi-sc-component {
    width: 100% !important;
}
.fi-op-menu {
    display: flex;
    width: 100%;
}
.fi-op-menu > .fi-dropdown,
.fi-op-menu .fi-dropdown-trigger {
    width: 100% !important;
}
.fi-op-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.05rem;
    width: 100%;
    height: 2.25rem;
    padding: 0 0.2rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(120, 120, 128, 0.3);
    background: rgba(120, 120, 128, 0.08);
    color: rgb(107 114 128);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}
.dark .fi-op-trigger {
    color: rgb(209 213 219);
}
.fi-op-trigger:hover {
    background: rgba(120, 120, 128, 0.16);
}
.fi-op-symbol {
    font-size: 0.95rem;
}
.fi-op-caret {
    height: 0.7rem;
    width: 0.7rem !important;
    opacity: 0.5;
}
.fi-op-item-symbol {
    display: inline-block;
    min-width: 1.75rem;
    font-weight: 600;
    color: rgb(107 114 128);
}
.fi-op-item-active {
    font-weight: 700;
}

/* Header-filter controls fill their (now fixed-width) cell rather than dictate it. */
.fi-ta-header-filter .fi-input-wrp,
.fi-ta-header-filter .fi-select-input,
.fi-ta-header-filter .fi-select-input-btn {
    min-width: 0 !important;
    max-width: 100% !important;
}

/*
 * #1 Active-state — a filter with a value gets an amber accent + tint so active
 * filters read at a glance instead of looking identical to empty ones. Detected
 * via a filled value input (placeholders make empty inputs `:placeholder-shown`).
 */
.fi-ta-header-filter-cell:has(.fi-input:not(:placeholder-shown)) {
    background-color: rgba(245, 158, 11, 0.07);
    box-shadow: inset 2px 0 0 0 rgb(245 158 11);
}

/*
 * Facet panel — enum columns auto-promoted to a value/count/bar panel above the
 * table (see App\Filament\Support\FacetPanel). Plain CSS so it doesn't depend on
 * Tailwind utilities being present in Filament's compiled stylesheet.
 */
/* The widget wraps in <x-filament-widgets::widget> so columnSpan:'full' spans the
   page grid; this makes the inner grid claim the full section width too, so the
   facets are never bunched to one side. */
.fi-facets {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem 2rem;
}
@media (min-width: 640px) {
    .fi-facets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    /* Dynamic: one equal column per facet, clamped to 3..6 (--facet-cols, set
       inline per render). So each facet is at most 1/3 of the width (3 → 1/3 each,
       5 → 1/5 each) and at most 6 sit in a row — extra facets wrap to the next. */
    .fi-facets { grid-template-columns: repeat(var(--facet-cols, 3), minmax(0, 1fr)); }
}

.fi-facet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.fi-facet-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(107 114 128); /* gray-500 */
}
.fi-facet-count { font-size: 0.7rem; color: rgb(156 163 175); }

/* Per-facet "Clear ✕" — shown in the head only when that facet has an active
   selection; muted by default, danger on hover. */
.fi-facet-head-meta { display: flex; align-items: center; gap: 0.4rem; }
.fi-facet-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(156 163 175);
}
.fi-facet-clear:hover { color: rgb(239 68 68); }

/*
 * Markdown infolist content — a subtle card so a rendered body reads as its own
 * block instead of bleeding into the scalar field grid above it. MarkdownRenderer
 * tags the entry with `.fi-md-content`; no section header, just visual separation.
 * Neutral grey tint works on both light + dark panels.
 */
.fi-md-content {
    margin-top: 0.25rem;
    padding: 0.875rem 1.125rem;
    background: rgba(120, 120, 128, 0.08);
    border: 1px solid rgba(120, 120, 128, 0.16);
    border-radius: 0.75rem;
}

.fi-facet-rows {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 13.5rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}
/* Slim scrollbar so long facets (e.g. all HTTP statuses) stay compact. */
.fi-facet-rows { scrollbar-width: thin; }
.fi-facet-rows::-webkit-scrollbar { width: 6px; }
.fi-facet-rows::-webkit-scrollbar-thumb { background: rgba(120, 120, 128, 0.35); border-radius: 9999px; }

.fi-facet-row {
    display: block;
    width: 100%;
    padding: 0;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}
.fi-facet-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgb(107 114 128);
}
.fi-facet-row:hover .fi-facet-row-top { color: rgb(31 41 55); }
.dark .fi-facet-row-top { color: rgb(209 213 219); }
.dark .fi-facet-row:hover .fi-facet-row-top { color: rgb(255 255 255); }
.fi-facet-row-selected .fi-facet-row-top { font-weight: 700; color: rgb(17 24 39); }
.dark .fi-facet-row-selected .fi-facet-row-top { color: rgb(255 255 255); }

.fi-facet-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fi-facet-val { color: rgb(156 163 175); font-variant-numeric: tabular-nums; }

.fi-facet-track {
    display: block;
    margin-top: 0.25rem;
    height: 0.375rem;
    width: 100%;
    border-radius: 9999px;
    background: rgba(120, 120, 128, 0.18);
    overflow: hidden;
}
.fi-facet-fill {
    display: block;
    height: 100%;
    border-radius: 9999px;
    transition: width 0.2s ease;
}

/*
 * HTTP Requests overview — "by URL / by host" summary tables (App\Filament\
 * Resources\HttpRequests\Widgets\HttpSummaryTable). Plain CSS, 4-column grid:
 * key (flex) · requests (+bar) · errors · avg.
 */
.fi-http-summary-head,
.fi-http-summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 9rem 5rem 5rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
}
.fi-http-summary-head {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(156 163 175);
    border-bottom: 1px solid rgba(120, 120, 128, 0.18);
}
.fi-http-summary-row {
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(120, 120, 128, 0.1);
}
.fi-http-summary-key {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgb(55 65 81);
}
.dark .fi-http-summary-key { color: rgb(229 231 235); }
.fi-http-summary-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    color: rgb(107 114 128);
}
.dark .fi-http-summary-num { color: rgb(209 213 219); }
.fi-http-summary-err { color: rgb(239 68 68); font-weight: 600; }
.fi-http-summary-bar {
    flex: 1;
    height: 0.375rem;
    border-radius: 9999px;
    background: rgba(120, 120, 128, 0.18);
    overflow: hidden;
}
.fi-http-summary-fill {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background: #3b82f6;
}