/* Oppo redesign — Metrics & Reports page.
 *
 * Built from Figma node 78:3273 ("top Nav and Body" — Metrics & Reports
 * page). Mounts inside `.oppo-shell #content-area` via oppo-reports.js,
 * which replaces `window.renderReports`. Uses tokens from oppo-shell.css
 * (--text-main #F3F4F6, --text-muted #C4C4C4, --border-dim #1C3D5E,
 * --oppo-type-* font ramps).
 *
 * Figma facts (verbatim):
 *   - Page outer padding 176px from main column edges (1680 - 1328) / 2
 *   - 4 KPI cards: 320×80, gap 16, bg rgba(255,255,255,0.05), border #1C3D5E,
 *     rounded 6, padding 16, backdrop-blur 15
 *   - 1 card outer (table wrapper): bg rgba(255,255,255,0.05), border #17314B,
 *     rounded 6, padding 16, gap 16
 *   - Table header cells: bg #080323, height 40, px 16/py 12, gap 4, header
 *     text Montserrat SemiBold 12/16 #F3F4F6, divider 1px #1C3D5E
 *   - Data cells: height 48, px 16/py 12, border-b 1px #1C3D5E.
 *     Zebra: even rows bg #080323, odd rows transparent.
 *     Company name col: #4A8CCA (Blue/Blue-80). Other columns: #C4C4C4.
 */

/* ── Page outer ────────────────────────────────────────────────────────
 * Figma canvas: `.oppo-main` (= "Body") is 1680, content is 1328 with
 * 176-px inset each side. We replicate the look at any viewport by:
 *   - capping content width at 1328 px (Figma's content track), centred
 *   - using 32 px side gutter as a sensible minimum on narrow viewports
 * (legacy `<main>` Tailwind constraints are flattened in oppo-shell.css). */
#content-area.oppo-reports-host {
    /* Page gutter is owned by the legacy `<main>` (see oppo-shell.css —
     * `.oppo-main > main { padding: 24px 32px }`). Don't double-pad. */
    padding: 0;
    box-sizing: border-box;
}

.oppo-reports {
    width: 100%;
    max-width: 1328px;
    margin: 0 auto;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.oppo-reports-title {
    font: var(--oppo-type-h1);
    letter-spacing: 0;
    color: var(--text-main);
    margin: 0;
}

/* ── Filter bar — Figma 151:973 (default) + 174:1608 (active state) ────
 * Container: bg rgba(255,255,255,0.05), border #1C3D5E, rounded 6, p:8;
 * one row of 36-px controls, gap 8. Inner row layout — left cluster
 * Holds Search + 4 Quick-Filter chips + Clear button. Active/Missing/All
 * and Analytics/List segmented groups moved to the table-header row per
 * Figma 285:9779. */
.oppo-reports-filterbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #1C3D5E;
    border-radius: 6px;
    flex-wrap: wrap;
}

.oppo-reports-filterbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Search — Figma 174:2315 (200×36) ──────────────────────────────────
 * Solid border #3C3C3A (Dark grey), rounded 4, padding 6/12, drop-shadow
 * xs (rgba(10,13,18,0.05) y=1 b=2). Magnifier icon 20×20, gap 8 to text.
 * Placeholder/value Montserrat 500 14/24, color #C4C4C4. */
.oppo-reports-search-wrap {
    position: relative;
    width: 200px;
    flex: none;
}
.oppo-reports-search-wrap::before {
    content: "";
    position: absolute;
    top: 50%; left: 12px;
    width: 20px; height: 20px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23C4C4C4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") no-repeat center;
    pointer-events: none;
}
.oppo-reports-search {
    box-sizing: border-box;
    height: 36px;
    width: 100%;
    background: transparent;
    border: 1px solid #3C3C3A;
    border-radius: 4px;
    padding: 6px 12px 6px 40px;
    font: 500 14px/24px var(--oppo-font-family);
    letter-spacing: 0;
    color: #C4C4C4;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    outline: none;
}
.oppo-reports-search::placeholder { color: #C4C4C4; }
.oppo-reports-search:focus { border-color: #4A8CCA; color: var(--text-main); }

/* ── Quick Filter chip — Figma 174:2316..174:2319 ──────────────────────
 * Dashed border #3C3C3A, h36, padding 10/12, rounded 6, gap 8.
 * Children: lucide circle-plus 16×16, label 12 Medium #C4C4C4, optional
 * separator + value badge(s) (Figma 174:1612 active state). */
.oppo-reports-chip {
    appearance: none;
    box-sizing: border-box;
    height: 36px;
    padding: 10px 12px;
    background: transparent;
    border: 1px dashed #3C3C3A;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
    color: #C4C4C4;
    font: 500 12px/16px var(--oppo-font-family);
    letter-spacing: 0;
    transition: border-color .15s, color .15s;
}
.oppo-reports-chip:hover { border-color: #757575; color: var(--text-main); }
.oppo-reports-chip.is-active { color: var(--text-main); }

.oppo-reports-chip-icon {
    width: 16px; height: 16px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.oppo-reports-chip-icon svg {
    width: 16px; height: 16px;
    stroke: currentColor;
}

/* Vertical separator between label and value badges — 1px wide, 16px tall,
 * Dark grey #3C3C3A. */
.oppo-reports-chip-sep {
    width: 1px;
    height: 16px;
    background: #3C3C3A;
    flex: none;
}

/* Inline value badge inside an applied chip — Figma 174:1612 badge.
 * bg #1C3D5E, padding 2/8, rounded 4, text 12 Medium #F3F4F6. */
.oppo-reports-chip-badge {
    background: #1C3D5E;
    color: #F3F4F6;
    border-radius: 4px;
    padding: 2px 8px;
    font: 500 12px/16px var(--oppo-font-family);
    letter-spacing: 0;
    white-space: nowrap;
}

/* ── Clear All Filters — Figma 174:1614 ────────────────────────────────
 * No border, no bg. Icon (X) 16×16 + text "Clear All Filters" 14 SemiBold
 * Red40 #F8485E. Padded 6/0 (height 36), gap 8. Visible only when ≥1
 * filter is applied. */
.oppo-reports-clear-all {
    appearance: none;
    height: 36px;
    padding: 6px 8px;
    background: transparent;
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #F8485E;
    font: 600 14px/24px var(--oppo-font-family);
    letter-spacing: 0;
    cursor: pointer;
}
.oppo-reports-clear-all:hover { color: #ff6378; }
.oppo-reports-clear-all svg { width: 16px; height: 16px; stroke: currentColor; }

/* ── Segmented (Active/Missing/All — Figma 151:1047) and
 *    (Analytics/List — Figma 151:988) ──────────────────────────────────
 * Outer container itself has no fill. Each segment is a 36-px button
 * with border #3C3C3A; outer wrapper of the FIRST and LAST segments
 * adds a #1C3D5E border on the rounded-corner side. Adjacent segments
 * overlap their borders via -1px margin so the line stays single-pixel.
 * Active segment: bg #1C3D5E, border #1C3D5E, padding 6/14, white text,
 * shadow xs. Inactive: text #C4C4C4 (Block H3 — 14 SemiBold). */
.oppo-reports-segmented {
    display: inline-flex;
    align-items: center;
    height: 36px;
}
.oppo-reports-segmented-btn {
    appearance: none;
    box-sizing: border-box;
    height: 36px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid #3C3C3A;
    color: #C4C4C4;
    font: 600 14px/24px var(--oppo-font-family);
    letter-spacing: 0;
    cursor: pointer;
    margin-right: -1px;
    transition: color .15s, background .15s, border-color .15s;
}
.oppo-reports-segmented-btn:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    box-shadow: -1px 0 0 0 #1C3D5E;          /* Outer ring on the left */
}
.oppo-reports-segmented-btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-right: 0;
    box-shadow: 1px 0 0 0 #1C3D5E;            /* Outer ring on the right */
}
.oppo-reports-segmented-btn:only-child {
    box-shadow: -1px 0 0 0 #1C3D5E, 1px 0 0 0 #1C3D5E;
}
.oppo-reports-segmented-btn:hover { color: var(--text-main); }
.oppo-reports-segmented-btn.is-active {
    background: #1C3D5E;
    border-color: #1C3D5E;
    color: #FFFFFF;
    padding: 6px 14px;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    z-index: 1;
}
.oppo-reports-segmented-btn.is-active:first-child {
    box-shadow: -1px 0 0 0 #1C3D5E, 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}
.oppo-reports-segmented-btn.is-active:last-child {
    box-shadow: 1px 0 0 0 #1C3D5E, 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}

/* ── KPI cards (4 across, 320×80, gap 16) ─────────────────────────────── */
.oppo-reports-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    transition: opacity 0.18s ease-out;
}

/* Dims the whole KPI strip during a refetch (set by renderKpis when
   state.loading is true and we already have prior data). The numbers
   stay readable so users can see the previous filter's totals while the
   new ones load. See oppo-reports.js renderKpis. */
.oppo-reports-kpis.is-refreshing {
    opacity: 0.5;
}

.oppo-reports-kpi {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border: 1px solid var(--border-dim);
    border-radius: 6px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 80px;
    box-sizing: border-box;
}

.oppo-reports-kpi-value {
    font: var(--oppo-type-h1);                      /* 600 24/32 Montserrat */
    letter-spacing: 0;
    color: var(--text-main);
    white-space: nowrap;
}

.oppo-reports-kpi-label {
    font: var(--oppo-type-block-m);                 /* 500 12/16 Montserrat */
    letter-spacing: 0;
    color: var(--text-muted);
}

.oppo-reports-kpi-loading {
    font: var(--oppo-type-block-m);
    color: #4A8CCA;
    font-style: italic;
}

/* ── Table card outer (Figma 83:7825 "1 card") ────────────────────────── */
.oppo-reports-table-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #1C3D5E;
    border-radius: 6px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.oppo-reports-table-title {
    font: var(--oppo-type-h3);                      /* 600 14/24 Montserrat */
    letter-spacing: 0;
    color: var(--text-main);
    margin: 0;
}

/* Header row: title on the left, Analytics|List toggle (and optional
 * Delete button) on the right (Figma 285:9779). */
.oppo-reports-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Right-cluster: bulk-delete + view toggle share the right edge. Toggle
 * is always present; delete button only appears for Admin + Missing + a
 * non-empty selection. */
.oppo-reports-table-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Bulk-delete button (Figma 151:1067 — trash icon + "Delete" label). Lives
 * to the right of the "All Companies (N)" title; only rendered when admin
 * has the Missing filter active and at least one row is checked. */
.oppo-reports-bulk-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    background: transparent;
    color: #F8485E;
    border: 1px solid #F8485E;
    border-radius: 4px;
    font: 500 14px/20px 'Montserrat', sans-serif;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.oppo-reports-bulk-delete-btn:hover {
    background: rgba(248, 72, 94, 0.08);
}
.oppo-reports-bulk-delete-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.oppo-reports-bulk-delete-btn img {
    /* Recolour the white-fill trash glyph to match the button text. */
    filter: brightness(0) saturate(100%) invert(45%) sepia(89%) saturate(2400%)
            hue-rotate(330deg) brightness(98%) contrast(98%);
}

/* Selection column — only rendered for admin + Missing filter. Width
 * mirrors Figma 151:1083 (40px). */
.oppo-reports-table th.oppo-reports-th-select,
.oppo-reports-table td.oppo-reports-td-select {
    width: 40px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}
.oppo-reports-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #F8485E;
    cursor: pointer;
}
.oppo-reports-table tr.is-selected {
    background: rgba(248, 72, 94, 0.06);
}

.oppo-reports-table-wrap {
    border-radius: 6px;
    overflow: hidden;
    width: 100%;
}

.oppo-reports-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.oppo-reports-table thead th {
    background: #080323;
    height: 40px;
    padding: 12px 16px;
    font: var(--oppo-type-highlighted-m);           /* 600 12/16 Montserrat */
    letter-spacing: 0;
    color: var(--text-main);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-dim);
    user-select: none;
}
.oppo-reports-table thead th.is-numeric { text-align: right; }
.oppo-reports-table thead th .oppo-sort {
    margin-left: 6px;
    color: var(--text-muted);
    font-size: 10px;
    cursor: pointer;
}
.oppo-reports-table thead th.is-sortable { cursor: pointer; }

.oppo-reports-table tbody td {
    height: 48px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-dim);
    font: var(--oppo-type-block-l);                 /* 500 14/24 Montserrat */
    letter-spacing: 0;
    color: var(--text-muted);
    vertical-align: middle;
}
.oppo-reports-table tbody td.is-numeric { text-align: right; white-space: nowrap; }
/* Zebra: even rows get the dark fill (matches Figma — alternating rows
 * have bg #080323, others transparent over the rgba(255,255,255,0.05)
 * card). Use 2nd-of-2 because tr indices are 1-based after header. */
.oppo-reports-table tbody tr:nth-child(even) td { background: #080323; }
.oppo-reports-table tbody tr:last-child td { border-bottom: 0; }

.oppo-reports-company-link {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: #4A8CCA;
    cursor: pointer;
    text-align: left;
}
.oppo-reports-company-link:hover { color: #70A4D3; }

/* Favourite (☆/★) toggle that sits to the left of the company link in the
 * Reports list — matches the Figma node 83:7825 left-side star and the
 * Company Overview star colour (#F5B342 = amber-400). */
.oppo-reports-star {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0 6px 0 0;
    font-size: 14px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    vertical-align: middle;
    transition: color 0.15s ease;
}
.oppo-reports-star:hover  { color: #F5B342; }
.oppo-reports-star.is-on  { color: #F5B342; }

/* Cloud provider logos inside the table — logo-only marks from
 * `/img/logos/*.svg` (shared with the PDF report renderer). Each fits in
 * a uniform 24×16 box with object-fit:contain, so the square logos sit
 * 16×16-centred and AWS scales proportionally without stretching. */
.oppo-reports-cloud-icons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.oppo-reports-cloud-icon {
    display: block;
    width: 24px;
    height: 16px;
    object-fit: contain;
}
.oppo-reports-cloud-chip {
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 6px;
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    font: 600 10px/1 var(--oppo-font-family);
    letter-spacing: 0;
    color: var(--text-muted);
}
.oppo-reports-cloud-chip-none { color: var(--text-muted); font-style: italic; }

/* Filter chip popover (Date / Campaigns / Country / Providers) */
.oppo-reports-chip-wrap { position: relative; display: inline-block; }
.oppo-reports-popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    min-width: 200px;
    max-width: 260px;
    padding: 8px;
    background: #15112E;
    border: 1px solid var(--border-dim);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-main);
    font: var(--oppo-type-block-m);
    letter-spacing: 0;
}
.oppo-reports-popover--list { max-height: 280px; overflow-y: auto; }
.oppo-reports-popover-row {
    display: flex; flex-direction: column; gap: 2px;
    font: var(--oppo-type-block-m); letter-spacing: 0;
}
.oppo-reports-popover-label { color: var(--text-muted); font-size: 10px; }
.oppo-reports-popover input[type="date"],
.oppo-reports-popover select {
    height: 32px;
    background: #080323;
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    color: var(--text-main);
    padding: 0 8px;
    font: var(--oppo-type-block-m); letter-spacing: 0;
    color-scheme: dark;
}
.oppo-reports-popover-check {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 6px; border-radius: 4px; cursor: pointer;
    font: var(--oppo-type-block-m); letter-spacing: 0;
}
.oppo-reports-popover-check:hover { background: rgba(255,255,255,0.04); }
.oppo-reports-popover-check input[type="checkbox"] { accent-color: #4A8CCA; }
.oppo-reports-popover-clear {
    appearance: none; border: 0; background: transparent;
    color: #4A8CCA; font: 600 11px/1 var(--oppo-font-family);
    text-align: left; padding: 6px; cursor: pointer; border-radius: 4px;
}
.oppo-reports-popover-clear:hover { background: rgba(74,140,202,0.08); }
.oppo-reports-popover-empty { color: var(--text-muted); font-size: 11px; padding: 8px; }

/* Campaign / single-select popover items — flat clickable list. */
.oppo-reports-popover-item {
    appearance: none;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font: var(--oppo-type-block-m);
    letter-spacing: 0;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.oppo-reports-popover-item:hover { background: rgba(255,255,255,0.04); }
.oppo-reports-popover-item.is-selected {
    background: #1C3D5E;
    color: #FFFFFF;
}

/* Campaign popover — wider so the meta line (provider + date range)
 * has room without truncation. */
.oppo-reports-popover--camp { min-width: 320px; }

/* Campaign row variant — two-line layout: bold name on top, muted meta
 * (provider · date range) underneath. Click applies all three filters. */
.oppo-reports-camp-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px;
    white-space: normal;
}
.oppo-reports-camp-row-main {
    font-weight: 600;
    line-height: 18px;
    color: inherit;
}
.oppo-reports-camp-row-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 14px;
    color: var(--text-muted, #C4C4C4);
}
.oppo-reports-camp-row.is-selected .oppo-reports-camp-row-meta {
    color: rgba(255, 255, 255, 0.78);
}
.oppo-reports-camp-row-prov { font-weight: 500; }
.oppo-reports-camp-row-dot  { opacity: 0.6; }
.oppo-reports-camp-row-range { font-variant-numeric: tabular-nums; }

/* Reports cell action buttons */
.oppo-reports-action-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid;
    border-radius: 4px;
    font: 600 12px/1 var(--oppo-font-family);
    letter-spacing: 0;
    cursor: pointer;
    background: transparent;
    transition: background .15s;
}
.oppo-reports-action-btn--generate {
    color: #4A8CCA;
    border-color: rgba(74, 140, 202, 0.30);
    background: rgba(74, 140, 202, 0.10);
}
.oppo-reports-action-btn--generate:hover { background: rgba(74, 140, 202, 0.20); }
.oppo-reports-action-btn--download {
    color: #67C85F;
    border-color: rgba(103, 200, 95, 0.30);
    background: rgba(103, 200, 95, 0.10);
}
.oppo-reports-action-btn--download:hover { background: rgba(103, 200, 95, 0.20); }
.oppo-reports-action-btn--working {
    color: #FCC354;
    border-color: rgba(252, 195, 84, 0.30);
    background: rgba(252, 195, 84, 0.10);
    cursor: not-allowed;
}
.oppo-reports-action-btn[disabled] { cursor: not-allowed; opacity: 0.55; }
/* Suppress hover on the missing-data disabled state — keeps the muted
 * look on mouse-over so the tooltip is the only affordance. */
.oppo-reports-action-btn--generate[disabled]:hover { background: rgba(74, 140, 202, 0.10); }

/* Wrapper that keeps "Download PDF" and the admin-only ✕ on the same line,
 * with a small ⊗ glyph after the button (Figma 83:7825 Redbrain row). */
.oppo-reports-action-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.oppo-reports-action-delete {
    appearance: none;
    background: none;
    border: 0;
    padding: 2px 4px;
    margin: 0;
    font-size: 13px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: color 0.15s ease;
}
.oppo-reports-action-delete:hover { color: #E5736A; }

/* Two-line generating pill: "Generating" + live detail underneath
 * ("3/5 sections" / current stage / "X assets"). Stacks vertically over
 * the standard 36-px button height. */
.oppo-reports-action-btn--stack {
    height: auto;
    min-height: 36px;
    padding: 4px 12px;
    line-height: 1.2;
    align-items: center;
}
.oppo-reports-action-btn-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}
.oppo-reports-action-btn-detail {
    font: 500 9px/1 var(--oppo-font-family);
    opacity: 0.8;
}

/* Spinner — same animation the legacy ↓ PDF / Generating buttons used
 * in app.js (Tailwind `animate-spin`), redefined locally so this view
 * doesn't depend on Tailwind utilities. */
.oppo-reports-spin {
    animation: oppo-reports-spin 0.9s linear infinite;
    flex-shrink: 0;
}
@keyframes oppo-reports-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Claim contact button + initials badge */
.oppo-reports-claim-btn {
    appearance: none;
    height: 36px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    font: 600 12px/1 var(--oppo-font-family);
    letter-spacing: 0;
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.oppo-reports-claim-btn:hover { color: #4A8CCA; border-color: rgba(74, 140, 202, 0.40); }
/* Outline Badge — design-system §5.5: transparent fill, 4px radius,
 * coloured text, no border. Status colour is canonical Pulse semantic. */
.oppo-reports-claim-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 20px;
    padding: 0 4px;
    border-radius: 4px;
    font: 600 12px/16px var(--oppo-font-family);
    background: transparent;
    border: 0;
}
.oppo-reports-claim-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.oppo-reports-claim-badge--approved { color: #5AB891; }   /* --base-green-100 */

/* Pending — per Figma node 150:964 (Solid Badge w/ grey tinted chrome,
 * white text). Overrides the outline base: no dot, translucent grey fill,
 * grey-40 border, white text. */
.oppo-reports-claim-badge--pending {
    background: rgba(196, 196, 196, 0.3);
    border: 1px solid #c4c4c4;          /* --base-grey-40 */
    color: #FFFFFF;
    padding: 2px 8px;
    height: auto;
    font-weight: 500;
}
.oppo-reports-claim-badge--pending::before { display: none; }

/* Wrapper for the badge + inline withdraw/cancel button + hover tooltip.
 * Uses :hover on the wrapper itself rather than a bespoke `.group` class
 * so we don't drag in a Tailwind utility on a Tailwind-free page. */
.oppo-reports-claim-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.oppo-reports-claim-withdraw {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0 2px;
    color: var(--text-muted);
    font: 700 10px/1 var(--oppo-font-family);
    cursor: pointer;
    transition: color .15s;
    line-height: 1;
}
.oppo-reports-claim-withdraw:hover { color: #F8485E; }

.oppo-reports-claim-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: none;
    width: max-content;
    max-width: 220px;
    padding: 10px 12px;
    /* Opaque elevated surface — `--bg-card` is a translucent rgba in this
     * theme which lets table cells bleed through. Matches the user-dropdown
     * fix in index.html. */
    background: #15112E;
    border: 1px solid var(--border-dim, rgba(255,255,255,0.1));
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    text-align: left;
    pointer-events: auto;
}
.oppo-reports-claim-cell:hover .oppo-reports-claim-tooltip,
.oppo-reports-claim-cell:focus-within .oppo-reports-claim-tooltip {
    display: block;
}
.oppo-reports-claim-tooltip-name {
    font: 600 12px/16px var(--oppo-font-family);
    color: var(--text-main);
    margin-bottom: 4px;
}
.oppo-reports-claim-tooltip-footer {
    font: 500 10px/14px var(--oppo-font-family);
    color: #FCC354;
    margin-top: 4px;
}
.oppo-reports-claim-email {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    font: 500 11px/16px var(--oppo-font-family);
    color: #4A8CCA;
    cursor: pointer;
    transition: color .15s;
}
.oppo-reports-claim-email:hover { color: #2E689E; }

/* Missing-since pill — Outline Badge style (design-system §5.5). */
.oppo-reports-missing-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 4px;
    border-radius: 4px;
    font: 600 12px/16px var(--oppo-font-family);
    color: #F8485E;             /* --base-red-40 */
    background: transparent;
    border: 0;
    margin-left: 8px;
}
.oppo-reports-missing-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Empty / error states */
.oppo-reports-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted);
    font: var(--oppo-type-block-m);
}
.oppo-reports-error {
    padding: 32px 24px;
    text-align: center;
    color: var(--text-muted);
    font: var(--oppo-type-block-m);
}
.oppo-reports-error-title {
    font: var(--oppo-type-h3);
    color: var(--text-main);
    margin-bottom: 8px;
}
.oppo-reports-error-message {
    color: #F8485E;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    margin: 8px 0 12px;
    word-break: break-word;
}

/* Skeleton loader for first paint */
.oppo-reports-skeleton {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.oppo-reports-skeleton-row {
    height: 48px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    background-size: 200% 100%;
    animation: oppo-shimmer 1.4s infinite;
    border-radius: 4px;
}
@keyframes oppo-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Pagination strip (Figma 150:1634) ───────────────────────────────────
 * Three regions on one row: Rows-per-page selector (left), item count
 * (centre), page-number buttons (right). Sits inside the table-card so
 * it shares the card's padding and stays aligned with the table edges. */
.oppo-reports-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--text-muted, #C4C4C4);
    font: var(--oppo-type-body-l);
    letter-spacing: 0;
}

.oppo-reports-pg-rows {
    display: flex;
    align-items: center;
    gap: 8px;
}
.oppo-reports-pg-label {
    color: var(--text-muted, #C4C4C4);
}
.oppo-reports-pg-rows-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C4C4C4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")
        no-repeat right 8px center;
    border: 1px solid #3C3C3A;             /* --base-grey-100 (input border) */
    border-radius: 4px;
    color: var(--text-main, #F3F4F6);
    height: 36px;
    padding: 0 28px 0 12px;
    font: inherit;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    cursor: pointer;
}
.oppo-reports-pg-rows-select:focus {
    outline: none;
    border-color: #4A8CCA;
    box-shadow: 0 0 0 3px rgba(74, 140, 202, 0.25);
}
.oppo-reports-pg-rows-select option {
    background: #080323;
    color: #F3F4F6;
}

.oppo-reports-pg-count {
    color: var(--text-main, #E5E7EB);
}

.oppo-reports-pg-pages {
    display: flex;
    align-items: center;
    gap: 4px;
}

.oppo-reports-pg-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-muted, #C4C4C4);
    font: var(--oppo-type-body-l);
    letter-spacing: 0;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.oppo-reports-pg-btn:hover:not(:disabled):not(.is-active) {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-main, #E5E7EB);
}
.oppo-reports-pg-btn.is-active {
    background: #1C3D5E;
    color: #F3F4F6;
    border-color: #1C3D5E;
    cursor: default;
}
.oppo-reports-pg-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.oppo-reports-pg-btn.oppo-reports-pg-nav {
    font-size: 18px;
    line-height: 1;
}
.oppo-reports-pg-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    color: var(--text-muted, #C4C4C4);
    user-select: none;
}