/*
 * Red "BETA" tag appended to the panel brand name
 * (App\Providers\Filament\AdminPanelProvider::panel → brandName).
 *
 * The brand name lives in Filament's .fi-logo, which is `display: flex` with no
 * `align-items` — so the tag is a *flex item*: `vertical-align` is ignored and
 * the default `stretch` blows it up to the full container height. Pin it with
 * `align-self` instead, and add the horizontal gap on the flex container (margin
 * on a flex item works too, but the gap keeps it symmetric if a logo is added).
 */
.fi-logo:has(> .fi-beta-tag) {
    gap: 0.4rem;
}

.fi-beta-tag {
    /* Top-align inside the flex line and keep the tag at its natural height. */
    align-self: flex-start;
    flex: 0 0 auto;
    /* flex-start pins the tag to the top of the line box, which sits ~3px above
       the cap height of the 1.25rem brand text — nudge it down so the tag's top
       edge lines up with the capital letters instead of floating above them. */
    margin-top: 0.27em;
    padding: 0.25em 0.4em;
    border-radius: 0.25rem;
    background: var(--danger-600, #dc2626);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
}

/*
 * Styling for the custom ProviderPicker form field
 * (App\Filament\Forms\Components\ProviderPicker), reproducing the
 * pre-Filament icon-card provider selector inside the Filament theme.
 */

.fi-provider-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.fi-provider-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.625rem;
    min-width: 8rem;
    padding: 1rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    background: var(--white, #fff);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.fi-provider-card:hover {
    border-color: var(--gray-300);
}

/* Visually hide the underlying checkbox but keep it focusable. */
.fi-provider-card-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

/* Radio-style selection dot in the top-left corner. */
.fi-provider-card-dot {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--gray-300);
    border-radius: 50%;
    background: var(--white, #fff);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.fi-provider-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-top: 0.5rem;
    color: var(--gray-700);
}

.fi-provider-card-icon svg {
    width: 100%;
    height: 100%;
}

.fi-provider-card-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--gray-500);
    font-size: 1.25rem;
    font-weight: 700;
}

.fi-provider-card-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-700);
    line-height: 1.2;
}

/* ---- Selected state ---- */
.fi-provider-card-input:checked ~ .fi-provider-card-dot {
    border-color: var(--primary-600);
    background: var(--primary-600);
    box-shadow: inset 0 0 0 3px var(--white, #fff);
}

.fi-provider-card:has(.fi-provider-card-input:checked) {
    border-color: var(--primary-600);
    background: rgb(var(--primary-50, 238 242 255));
}

.fi-provider-card:has(.fi-provider-card-input:checked) .fi-provider-card-label,
.fi-provider-card:has(.fi-provider-card-input:checked) .fi-provider-card-icon {
    color: var(--primary-600);
}

/* ---- Keyboard focus ---- */
.fi-provider-card:focus-within {
    border-color: var(--primary-600);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* ---- Dark mode ---- */
.dark .fi-provider-card {
    border-color: var(--gray-700);
    background: var(--gray-900);
}

.dark .fi-provider-card:hover {
    border-color: var(--gray-600);
}

.dark .fi-provider-card-dot {
    border-color: var(--gray-600);
    background: var(--gray-900);
}

.dark .fi-provider-card-icon {
    color: var(--gray-200);
}

.dark .fi-provider-card-label {
    color: var(--gray-200);
}

.dark .fi-provider-card:has(.fi-provider-card-input:checked) {
    background: rgba(99, 102, 241, 0.15);
}

.fi-provider-picker-empty {
    font-size: 0.875rem;
    color: var(--gray-500);
}

/*
 * Dashboard project quicklinks (App\Filament\Widgets\ProjectQuicklinks).
 * Reuses the .fi-provider-card look, but the cards are square links and the
 * grid is responsive/auto-filling instead of a fixed three-column layout.
 */
.fi-project-quicklinks {
    display: grid;
    /* Mobile first: 2 per row. */
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

/* Tablet: 3 per row. */
@media (min-width: 640px) {
    .fi-project-quicklinks {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop: up to 4 per row, then wrap. */
@media (min-width: 1024px) {
    .fi-project-quicklinks {
        grid-template-columns: repeat(4, 1fr);
    }
}

.fi-project-card {
    aspect-ratio: 1 / 1;
    justify-content: center;
    text-decoration: none;
}

.fi-project-card .fi-provider-card-icon {
    margin-top: 0;
}

.fi-project-card-favicon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0.375rem;
}

.fi-project-card .fi-provider-card-label {
    overflow-wrap: anywhere;
}

/*
 * Keep tables inside their container. A long, unbroken domain URL (no spaces)
 * won't wrap on `whitespace-normal` alone, so the domain cell forces the whole
 * table wider than its wrapper and pushes the trailing actions column behind
 * the horizontal scrollbar. Breaking long strings lets the table shrink to the
 * available width so every column (including the actions) stays visible.
 */
.fi-ta-cell-domain .fi-ta-text-item {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/*
 * Segmented sentiment pill on the project KPI overview
 * (App\Filament\Resources\Projects\Widgets\ProjectKpiOverview → Sentiment stat).
 * Positive (green) / neutral (grey) / negative (red) segments size themselves
 * proportionally via inline flex-grow, so the visual mirrors the distribution.
 */
.fi-sentiment-pill {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 16rem;
    height: 2.25rem;
    margin-top: 0.25rem;
    border-radius: 9999px;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}

.fi-sentiment-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    /* All three segments share the same width regardless of their value. */
    flex: 1 1 0;
    padding: 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
}

.fi-sentiment-positive {
    background: var(--success-100, #dcfce7);
    color: var(--success-700, #15803d);
}

.fi-sentiment-neutral {
    background: var(--gray-200, #e5e7eb);
    color: var(--gray-700, #374151);
}

.fi-sentiment-negative {
    background: var(--danger-100, #fee2e2);
    color: var(--danger-700, #b91c1c);
}

.dark .fi-sentiment-positive {
    background: rgba(34, 197, 94, 0.25);
    color: var(--success-300, #86efac);
}

.dark .fi-sentiment-neutral {
    background: var(--gray-700, #374151);
    color: var(--gray-200, #e5e7eb);
}

.dark .fi-sentiment-negative {
    background: rgba(239, 68, 68, 0.25);
    color: var(--danger-300, #fca5a5);
}

/*
 * Tracking-run detail (App\Filament\Resources\LlmRuns\Schemas\LlmRunInfolist):
 * each response is already wrapped in its own collapsible section (accordion),
 * so the repeatable-item's own frame (border + padding) just adds a redundant
 * box-in-a-box. Strip it so the accordion sections sit flush.
 */
.fi-in-repeatable-item {
    padding: 0;
    border: none;
}

/*
 * Markdown-formatted answers use a horizontal rule between sections. The prose
 * default leaves a lot of air around it; tighten the vertical spacing so the
 * separator sits closer to the surrounding text.
 */
.fi-prose hr {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

/*
 * Highlighted entity aliases inside a tracking-run answer
 * (App\Filament\Resources\LlmRuns\Schemas\LlmRunInfolist::highlightEntities):
 * green for our own brand/products, red for competitors.
 */
.fi-entity-brand,
.fi-entity-competitor {
    padding: 0.05em 0.25em;
    border-radius: 0.25rem;
    font-weight: 600;
    /* Reset the browser default <mark> yellow. */
    background: transparent;
}

.fi-entity-brand {
    background: var(--success-100, #dcfce7);
    color: var(--success-700, #15803d);
}

.fi-entity-competitor {
    background: var(--danger-100, #fee2e2);
    color: var(--danger-700, #b91c1c);
}

.dark .fi-entity-brand {
    background: rgba(34, 197, 94, 0.25);
    color: var(--success-300, #86efac);
}

.dark .fi-entity-competitor {
    background: rgba(239, 68, 68, 0.25);
    color: var(--danger-300, #fca5a5);
}

/*
 * Mention-count pill in front of the prompt text in a tracking-run's response
 * accordion (App\Filament\Resources\LlmRuns\Schemas\LlmRunInfolist::promptHeading):
 * a green count of own-brand mentions and a red count of competitor mentions.
 *
 * Lay the section heading out as a flex row so the pill stays fixed on the left
 * and the prompt text sits beside it (and wraps within its own column) instead
 * of breaking onto a new line underneath the pill.
 */
.fi-section-header-heading:has(> .fi-response-counts) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fi-response-counts {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    /* Fixed on the left: never shrink, never grow. */
    flex: 0 0 auto;
    /* Nudge down so the pills align with the first line of prompt text. */
    margin-top: 0.1rem;
}

.fi-response-prompt {
    /* Fill the remaining width and wrap; min-width:0 lets long words break
       inside the flex item instead of forcing the row wider. */
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fi-response-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0.05em 0.4em;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25;
}

.fi-response-count-brand {
    background: var(--success-100, #dcfce7);
    color: var(--success-700, #15803d);
}

.fi-response-count-competitor {
    background: var(--danger-100, #fee2e2);
    color: var(--danger-700, #b91c1c);
}

.dark .fi-response-count-brand {
    background: rgba(34, 197, 94, 0.25);
    color: var(--success-300, #86efac);
}

.dark .fi-response-count-competitor {
    background: rgba(239, 68, 68, 0.25);
    color: var(--danger-300, #fca5a5);
}

/*
 * "No entities defined" warning (EntitiesRelationManager empty state): the
 * heading carries the .fi-entities-empty-warning marker, so tint the warning
 * icon red as well — the whole empty state then reads as a warning rather than
 * a neutral "nothing here".
 */
.fi-ta-empty-state:has(.fi-entities-empty-warning) .fi-ta-empty-state-icon-bg {
    color: var(--danger-600, #dc2626);
    background: var(--danger-50, #fef2f2);
}

.dark .fi-ta-empty-state:has(.fi-entities-empty-warning) .fi-ta-empty-state-icon-bg {
    color: var(--danger-400, #f87171);
    background: rgba(239, 68, 68, 0.15);
}

/*
 * "No entities" tab flag (EntitiesRelationManager::getBadge): render the danger
 * tab badge as a bare red dot instead of the full badge pill — drop its padding
 * and background frame, force a small round shape, and hide the "●" glyph so
 * only the coloured circle remains.
 */
.fi-tabs-item .fi-badge.fi-color-danger {
    width: 0.5rem;
    height: 0.5rem;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border-radius: 9999px;
    background: var(--danger-600, #dc2626);
    box-shadow: none;
}

.fi-tabs-item .fi-badge.fi-color-danger .fi-badge-label-ctn,
.fi-tabs-item .fi-badge.fi-color-danger .fi-badge-label {
    /* Hide the "●" glyph; the element itself is the dot. */
    font-size: 0;
    line-height: 0;
    color: transparent;
}