/*
 * Smart Mentions — page-specific styles.
 *
 * Layered on top of static/css/components/ts_table/styles.css. We only
 * style what's *new* on this page: the centered title block, the period
 * pill tabs, the mentioners avatar stack with hover tooltip, the unique
 * mentioners cell and the top mentioner card. Everything else (the table
 * itself, score / followers cells, premium overlay) is inherited.
 *
 * Design tokens come from the source design (smart-mentions-blue.html)
 * and are scoped with the .smart-mentions-page selector so they don't
 * leak to other pages that share the same global CSS bundle.
 */

.smart-mentions-page {
    --sm-blue: #0544FD;
    --sm-blue-hover: #0033AD;
    --sm-text: #000;
    --sm-muted: #656565;
    --sm-faint: #878593;
    --sm-line: #EBEBEB;
    --sm-soft: #F3F3F3;
    --sm-row-hover: #FAFAFA;
    --sm-tab-bg: #fff;
    --sm-tab-inactive: #6B7280;
}

/* The base `.ts-table-container { overflow-x: auto }` rule (set for
   horizontal scroll on narrow viewports) implicitly turns the container
   into a scroll container on BOTH axes (CSS spec: when one axis is
   non-visible, the other auto-coerces to non-visible). That means the
   absolute-positioned hover tooltip on a row near the bottom of the
   table inflates `scrollHeight` and either triggers a vertical
   scrollbar or gets clipped under the footer.
   We override to `overflow: visible` so the tooltip can float over the
   footer freely. The trade-off — at narrow viewports the table extends
   past the viewport and the page body shows a horizontal scrollbar
   instead of the container — is acceptable; that's also how Trending
   and most pages on the site behave at narrow widths. */
.smart-mentions-page .ts-table-container {
    overflow: visible !important;
}

.sm-page-title {
    text-align: center;
    padding: 55px 0 24px !important;
}
.sm-page-title h1 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -0.4px;
}
.sm-page-title p {
    color: var(--sm-muted);
    font-size: 16px;
}

/* Both classes sit on the same element (`<div class="content-wrapper
   table-page smart-mentions-page">`), so the selector chains them with
   no space — a descendant selector (`.smart-mentions-page .content-wrapper`)
   would not match and the base `.content-wrapper.table-page { padding-top: 24px }`
   would leak through, adding an extra 24px gap between the title and
   the period switcher. */
.content-wrapper.smart-mentions-page {
    padding-top: 0 !important;
}

/* ---- Period tabs --------------------------------------------------- */

.sm-period-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.sm-period-row__label {
    font-size: 14px;
    color: var(--sm-text);
}
.sm-period-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--sm-tab-bg);
    border: 1px solid var(--sm-line);
    border-radius: 8px;
}
.sm-period-tab {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0 16px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    font-weight: 500;
    color: var(--sm-tab-inactive);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sm-period-tab:hover:not(.active) {
    background: #F3F4F6;
    color: var(--sm-text);
}
.sm-period-tab.active {
    background: var(--sm-blue);
    color: #fff;
    font-weight: 600;
}

/* ---- Period hint (info popover next to tabs) ---------------------- */

.sm-period-hint {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.sm-period-hint__btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sm-faint);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.sm-period-hint__btn:hover,
.sm-period-hint__btn:focus-visible {
    color: var(--sm-text);
    background: var(--sm-soft);
    outline: none;
}
.sm-period-hint__tip {
    display: none;
    position: absolute;
    z-index: 60;
    top: calc(100% + 8px);
    left: 0;
    width: max-content;
    max-width: 300px;
    padding: 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.sm-period-hint:hover .sm-period-hint__tip,
.sm-period-hint:focus-within .sm-period-hint__tip {
    display: block;
}
.sm-period-hint__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sm-text);
    margin-bottom: 4px;
}
.sm-period-hint__body {
    font-size: 12px;
    line-height: 1.4;
    color: var(--sm-muted);
}
.sm-period-hint__body strong {
    color: var(--sm-text);
    font-weight: 600;
}

/* ts_table's base styles set `overflow: hidden !important` on every <td>
   to keep long names truncated. Our hover tooltip needs to extend past the
   cell boundary so the popup is visible — the !important here beats the
   base rule.
   Lifting the hovered row turns it into a stacking context so the absolute
   tooltip is painted above the next row's cell backgrounds, which would
   otherwise cover the popup as the cursor moves over the trailing edge. */
.smart-mentions-page table.ts-table tbody td {
    overflow: visible !important;
}
/* Hovered row needs to sit above the premium overlay (z-index: 100 in
   ts_table base styles) so the mentioners tooltip — which lives inside the
   row's stacking context — can paint over the upgrade button when the
   bottom-most non-blurred row is hovered. */
.smart-mentions-page table.ts-table tbody tr:hover {
    position: relative;
    z-index: 200;
}
/* While a row's mentioners popup is open (the JS-toggled `.is-open`
   class), pin the row's stacking context above ANY hovered sibling row
   (which gets z-index 200). Without this, when the cursor moves off the
   popup-owning row to a neighbor during the 400ms close delay, the new
   row's hover bg paints over the still-visible popup and gives the
   illusion of a half-transparent fade. */
.smart-mentions-page table.ts-table tbody tr:has(.sm-mentioners-stack.is-open) {
    position: relative;
    z-index: 300;
}

/* Trim the cell padding to fit the eight-column layout in a standard
   desktop viewport (≈1280–1440 px). The base padding of 16px×16 was
   tuned for 5-column Trending. */
.smart-mentions-page table.ts-table thead th,
.smart-mentions-page table.ts-table tbody td {
    padding: 12px 10px !important;
}

/* Pin column widths so they don't redistribute based on header label
   length (which made the Twitter Score column eat space from Followers
   and Smart Mentions). Widths are set on `<th>` and inherited by `<td>`
   via DataTables. The metric columns get just enough room for their
   compact-formatted body content; Username / Description flex into the
   remainder. Numbers chosen so the eight columns sum to ≈1240 px (with
   the row-padding overhead) and the table fits a 1280-1440 viewport. */

.smart-mentions-page table.ts-table thead th.sm-col-rank        { width: 44px;  min-width: 44px; }
.smart-mentions-page table.ts-table thead th.sm-col-username    { width: 240px; min-width: 220px; }
.smart-mentions-page table.ts-table thead th.sm-col-score       { width: 110px; min-width: 100px; }
.smart-mentions-page table.ts-table thead th.sm-col-followers   { width: 130px; min-width: 120px; }
.smart-mentions-page table.ts-table thead th.sm-col-mentions    { width: 210px; min-width: 190px; }
.smart-mentions-page table.ts-table thead th.sm-col-unique      { width: 90px;  min-width: 80px;
    /* Wrap the long "Unique Mentioners" header so the column shrinks to its
       narrow body content (compact number like "1.2K"). */
    white-space: normal !important;
    line-height: 1.2 !important;
}
.smart-mentions-page table.ts-table thead th.sm-col-description   { width: auto;  min-width: 240px; }

/* Body cells inherit the th widths automatically, but clamp the textual
   columns so a long bio / display name doesn't blow the layout. */
.smart-mentions-page table.ts-table tbody td.sm-col-unique         { white-space: nowrap; }
.smart-mentions-page table.ts-table tbody td.sm-col-description    { max-width: 360px; }

/* ---- Mentioners stack (Smart Mentions cell) ----------------------- */

.sm-mentioners-stack {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    /* Force a fresh stacking context so the tooltip's z-index applies
       relative to this wrapper rather than competing with global layers. */
    isolation: isolate;
}
.sm-mentioners-stack__avatars {
    display: inline-flex;
    align-items: center;
}
.sm-mentioners-stack__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px #fff;
    background: var(--sm-soft);
}
.sm-mentioners-stack__avatar + .sm-mentioners-stack__avatar,
.sm-mentioners-stack__avatars > * + * {
    margin-left: -8px;
}
.sm-mentioners-stack__count {
    font-weight: 700;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/* ---- Mentioners hover tooltip ------------------------------------- */

.sm-mentioners-tip {
    /* Visibility is driven by JS in smart_mentions.html (see the
       `onDraw` hook): a singleton + 400ms close timer matching the
       Mentions overview chart tooltip
       (templates/components/twitter/detail/mentions_chart.html). The
       JS toggles `.is-open` on the stack — pure `display: none/block`
       so there is no opacity/visibility intermediate state. */
    display: none;
    position: absolute;
    z-index: 1000;
    top: calc(100% + 2px);
    /* Anchor to the left edge of the avatar stack so the popup starts at
       the Smart Mentions column edge (matches the source design). */
    left: 0;
    right: auto;
    min-width: 220px;
    padding: 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.sm-mentioners-stack.is-open .sm-mentioners-tip,
.sm-mentioners-stack:focus-within .sm-mentioners-tip {
    display: block;
}
.sm-mentioners-tip__title {
    font-size: 12px;
    color: var(--sm-muted);
    margin-bottom: 4px;
    padding: 0 8px;
}
.sm-mentioners-tip__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Row layout / sizing follow the search dropdown's `.search-item-row`
   reference (static/css/components/search.css) — 8px padding, 12px gap,
   32px avatar, 14/600 name, light-blue hover. */
.sm-mentioners-tip__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
}
.sm-mentioners-tip__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--sm-soft);
    flex-shrink: 0;
}
.sm-mentioners-tip__name {
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.2;
    /* Username/name takes the available middle space; truncate with ellipsis
       if the name is too long for the 220px-min-width tooltip card. */
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.sm-mentioners-tip__score {
    color: var(--sm-blue);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    margin-left: 10px;
}
.sm-mentioners-tip__row,
.sm-mentioners-stack__avatar {
    /* Both anchors live in stacks where we want them to feel like links —
       no underline, but a subtle hover highlight. */
    text-decoration: none;
}
.sm-mentioners-tip__row:hover {
    background: #f4f7ff;
}
.sm-mentioners-tip__row:hover .sm-mentioners-tip__name {
    color: var(--sm-blue);
}

/* ---- Unique mentioners cell --------------------------------------- */

.sm-unique-mentioners {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
}
.sm-unique-mentioners__count {
    font-weight: 700;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/* ---- Footer note --------------------------------------------------- */

.sm-footer-note {
    margin-top: 32px;
    text-align: center;
    color: var(--sm-muted);
    font-size: 12px;
}

/* ---- Dark mode (only override what changes) ------------------------ */

.dark .sm-period-tabs {
    background: var(--card-bg, #1f1f23);
    border-color: var(--border, #2a2a2f);
}
.dark .sm-period-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.04);
    color: #e6e6e6;
}
.dark .sm-mentioners-tip {
    background: var(--card-bg, #1f1f23);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.dark .sm-mentioners-tip__title {
    color: #aaa;
}
.dark .sm-mentioners-tip__name {
    color: #e6e6e6;
}
.dark .sm-mentioners-tip__row:hover {
    background: rgba(255, 255, 255, 0.06);
}
/* Higher specificity than `.sm-mentioners-tip__row:hover .sm-mentioners-tip__name`
   so the dark-blue hover color (unreadable on dark bg) doesn't kick in. */
.dark .sm-mentioners-tip__row:hover .sm-mentioners-tip__name {
    color: #fff;
}
.dark .sm-period-hint__btn:hover,
.dark .sm-period-hint__btn:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: #e6e6e6;
}
.dark .sm-period-hint__tip {
    background: var(--card-bg, #1f1f23);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.dark .sm-period-hint__title,
.dark .sm-period-hint__body strong {
    color: #e6e6e6;
}