/* Country-wise multi-select filters, issues dropdown, go-to-page, instant warning tooltip */

/* ── multi-select filter (msf) ─────────────────────────────────────────── */

.msf { position: relative; display: inline-block; }

.msf-button { cursor: pointer; text-align: left; min-width: 130px; }
.msf-button--active {
    border-color: var(--color-primary, #3b82f6);
    color: var(--color-primary, #3b82f6);
    font-weight: 600;
}

.msf-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 60;
    background: var(--color-bg-secondary, #fff);
    color: var(--color-text-primary, inherit);
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 10px;
    max-width: min(90vw, 900px);
    max-height: 60vh;
    overflow: auto;
}

/* One column per group (per country for markets). */
.msf-columns { display: flex; gap: 18px; align-items: flex-start; }

.msf-group { min-width: 140px; display: flex; flex-direction: column; gap: 2px; }

.msf-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--color-border, #d1d5db);
    white-space: nowrap;
    cursor: pointer;
}

.msf-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
    padding: 1px 2px;
}
.msf-option:hover { background: var(--color-bg-tertiary, rgba(127, 127, 127, 0.08)); border-radius: 4px; }

.msf-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
    margin-top: 6px;
    border-top: 1px solid var(--color-border, #d1d5db);
}

/* ── issues dropdown (red accent — it filters for problems) ────────────── */

.issues-filter { border-color: #ef4444; color: #ef4444; }
.issues-filter:focus { outline-color: #ef4444; }
.issues-filter option { color: var(--color-text, inherit); }

/* ── go-to-page ────────────────────────────────────────────────────────── */

.pagination-goto { display: inline-flex; align-items: center; gap: 4px; }
.pagination-goto input { width: 76px; }

/* ── warning triangle: next to the name, instant tooltip ───────────────── */

.scraper-name-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0; /* lets the name ellipsize inside the flex row */
    max-width: 340px;
}

.scraper-name-wrap .scraper-name-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* The triangle never disappears when the name truncates. */
.scraper-name-wrap .scraper-warning-badge { flex-shrink: 0; }

/* Instant CSS tooltip (no browser title-attribute delay). */
.scraper-warning-badge { position: relative; cursor: help; }
.scraper-warning-badge:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    z-index: 70;
    background: var(--color-bg-tertiary, #1f2937);
    color: var(--color-text-primary, #f9fafb);
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.75rem;
    white-space: pre-line;
    width: max-content;
    max-width: 320px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}