/* =====================================================
   Admin v3 — Benchmarks (/benchmarks)
   Layout fiel a page-benchmarks.jsx + seções herdadas do legado em ck-card.
   ===================================================== */

.benchmarks-page {
    max-width: var(--content-max);
    margin: 0 auto;
    padding-bottom: var(--s-7);
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
}

/* ---------- Header ---------- */
.benchmarks-header {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--s-4);
}

.benchmarks-header__left {
    flex: 1;
    min-width: 280px;
}

.benchmarks-header__breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    margin-bottom: var(--s-2);
}

.benchmarks-header__breadcrumb a {
    color: var(--text-mute);
    text-decoration: none;
}

.benchmarks-header__breadcrumb a:hover {
    color: var(--text);
    text-decoration: underline;
}

.benchmarks-header__breadcrumb > span:last-child {
    color: var(--text);
    font-weight: var(--fw-medium);
}

.benchmarks-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    align-items: center;
}

.benchmarks-period {
    display: flex;
    gap: var(--s-1);
}

.benchmarks-report-feedback {
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-md);
    font-size: var(--text-sm);
}

.benchmarks-report-feedback.is-success {
    background: var(--ok-soft);
    color: var(--ok);
    border: 1px solid var(--ok);
}

.benchmarks-report-feedback.is-error {
    background: var(--bad-soft);
    color: var(--bad);
    border: 1px solid var(--bad);
}

/* =====================================================
   Phase 1: Grid de 6 KPI cards (BenchmarkCard)
   ===================================================== */
.benchmarks-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-3);
}

@media (min-width: 768px) {
    .benchmarks-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1280px) {
    .benchmarks-grid { grid-template-columns: repeat(3, 1fr); }
}

.bm-card {
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--s-4);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.bm-card__status-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
}

.bm-card--green .bm-card__status-bar { background: var(--ok); }
.bm-card--yellow .bm-card__status-bar { background: var(--warn); }
.bm-card--red .bm-card__status-bar { background: var(--bad); }
.bm-card--neutral .bm-card__status-bar,
.bm-card--notapplicable .bm-card__status-bar { background: var(--text-faint); }

.bm-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--s-2);
}

.bm-card__title-block { flex: 1; min-width: 0; }

.bm-card__label {
    font-size: var(--text-xs);
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--fw-medium);
    margin: 0 0 var(--s-1);
}

.bm-card__value-row {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    flex-wrap: wrap;
}

.bm-card__value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--fw-semibold);
    color: var(--text);
    line-height: 1;
}

@media (min-width: 1024px) {
    .bm-card__value { font-size: var(--text-3xl); }
}

.bm-card__target {
    margin: var(--s-1) 0 0;
    font-size: var(--text-xs);
    color: var(--text-faint);
}

/* Peer comparison bar */
.bm-card__bar {
    padding: var(--s-2) 0;
}

.bm-card__bar-track {
    position: relative;
    height: 22px;
    background: var(--bg-sunken);
    border-radius: var(--r-pill);
    overflow: visible;
}

.bm-card__bar-fill {
    height: 100%;
    border-radius: var(--r-pill);
    transition: width var(--t-base) var(--ease-out);
}

.bm-card__bar-fill--green { background: var(--ok); }
.bm-card__bar-fill--yellow { background: var(--warn); }
.bm-card__bar-fill--red { background: var(--bad); }
.bm-card__bar-fill--neutral,
.bm-card__bar-fill--notapplicable { background: var(--text-mute); }

.bm-card__bar-marker {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    border-radius: 1px;
    transform: translateX(-1px);
}

.bm-card__bar-marker--onlyfans { background: var(--info); }
.bm-card__bar-marker--privacy { background: var(--text-faint); }

.bm-card__footer {
    display: flex;
    justify-content: space-between;
    gap: var(--s-2);
    padding-top: var(--s-2);
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}

.bm-card__compare {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.bm-card__compare-label {
    font-size: var(--text-2xs);
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--fw-semibold);
}

.bm-card__compare strong {
    font-size: var(--text-xs);
    color: var(--text-mute);
    font-weight: var(--fw-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-card__compare--mimuss strong {
    color: var(--text);
    font-weight: var(--fw-semibold);
}

/* =====================================================
   Phase 1: Geo + Pareto + Cohort trio
   ===================================================== */
.benchmarks-trio {
    display: grid;
    gap: var(--s-3);
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .benchmarks-trio { grid-template-columns: 1fr 1fr; }
}

.ck-card__body {
    padding: 0 var(--s-5) var(--s-4);
}

/* Geo bars */
.bm-geo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.bm-geo__item {
    display: grid;
    grid-template-columns: 90px 1fr 50px 50px;
    gap: var(--s-2);
    align-items: center;
    font-size: var(--text-sm);
}

.bm-geo__label {
    font-weight: var(--fw-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-geo__track,
.bm-pareto__track {
    height: 8px;
    background: var(--bg-sunken);
    border-radius: var(--r-pill);
    overflow: hidden;
}

.bm-geo__fill,
.bm-pareto__fill {
    height: 100%;
    background: var(--terra);
    border-radius: var(--r-pill);
}

.bm-geo__pct,
.bm-geo__count { font-size: var(--text-xs); }
.bm-geo__count { text-align: right; }

/* Pareto */
.bm-pareto {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.bm-pareto__item {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px var(--s-2);
    align-items: center;
    font-size: var(--text-sm);
}

.bm-pareto__label {
    grid-column: 1;
    font-weight: var(--fw-medium);
}

.bm-pareto__track {
    grid-column: 2;
    grid-row: 1;
}

.bm-pareto__pct {
    grid-column: 3;
    grid-row: 1;
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.bm-pareto__hint {
    grid-column: 2 / -1;
    grid-row: 2;
    font-size: var(--text-2xs);
    color: var(--text-faint);
}

.bm-pareto__footer {
    margin-top: var(--s-3);
    font-size: var(--text-xs);
}

.benchmarks-warning {
    background: var(--warn-soft);
    color: var(--warn);
    border: 1px solid var(--warn);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    font-size: var(--text-xs);
    margin-bottom: var(--s-2);
}

/* Cohort retention */
.bm-cohort__wrap {
    overflow-x: auto;
    padding: 0 var(--s-3) var(--s-3);
}

.bm-cohort {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.bm-cohort thead th {
    text-align: center;
    padding: var(--s-2) 4px;
    font-weight: var(--fw-medium);
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--text-2xs);
    border-bottom: 1px solid var(--line);
}

.bm-cohort__label {
    text-align: left !important;
    font-weight: var(--fw-medium);
    color: var(--text);
}

.bm-cohort__num {
    text-align: right;
    color: var(--text-mute);
}

.bm-cohort tbody td {
    padding: 4px;
    text-align: center;
    border-bottom: 1px solid var(--line);
}

.bm-cohort__cell {
    border-radius: var(--r-xs);
}

.bm-cohort__cell--green {
    background: rgba(77, 157, 108, 0.18);
    color: var(--ok);
}

.bm-cohort__cell--yellow {
    background: rgba(217, 154, 31, 0.18);
    color: var(--warn);
}

.bm-cohort__cell--red {
    background: rgba(196, 74, 58, 0.18);
    color: var(--bad);
}

.bm-cohort__cell--empty {
    color: var(--text-faint);
}

/* =====================================================
   Phase 2: Seções do legado em estilo ck-card
   ===================================================== */
.benchmarks-section-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    color: var(--text);
    margin: var(--s-4) 0 0;
    letter-spacing: -0.01em;
}

.benchmarks-grid-2 {
    display: grid;
    gap: var(--s-3);
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .benchmarks-grid-2 { grid-template-columns: 1fr 1fr; }
    .bm-leaderboard-card,
    .bm-compliance-card { grid-column: 1 / -1; }
}

/* Funil */
.bm-funnel {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.bm-funnel__step {
    flex: 1;
    min-width: 120px;
    padding: var(--s-3);
    background: var(--bg-sunken);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bm-funnel__step--highlight {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
}

.bm-funnel__label {
    font-size: var(--text-2xs);
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--fw-semibold);
}

.bm-funnel__value {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.bm-funnel__arrow {
    color: var(--text-faint);
    font-size: var(--text-xl);
}

/* Mix bar */
.bm-mix__bar {
    display: flex;
    height: 24px;
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--bg-sunken);
    margin-bottom: var(--s-3);
}

.bm-mix__seg {
    height: 100%;
    transition: width var(--t-base) var(--ease-out);
}

.bm-mix__seg--sub { background: var(--accent); }
.bm-mix__seg--ppv { background: var(--terra); }
.bm-mix__seg--tip { background: var(--pix); }
.bm-mix__seg--custom { background: var(--info); }
.bm-mix__seg--other { background: var(--text-faint); }

.bm-mix__legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    font-size: var(--text-sm);
}

.bm-mix__legend li {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.bm-mix__legend strong { margin-left: auto; }

.bm-mix__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--r-pill);
    flex-shrink: 0;
}

.bm-mix__dot--sub { background: var(--accent); }
.bm-mix__dot--ppv { background: var(--terra); }
.bm-mix__dot--tip { background: var(--pix); }
.bm-mix__dot--custom { background: var(--info); }
.bm-mix__dot--other { background: var(--text-faint); }

/* Histograma de tier */
.bm-histo {
    display: flex;
    align-items: flex-end;
    gap: var(--s-2);
    min-height: 140px;
    padding: var(--s-3) 0;
    overflow-x: auto;
}

.bm-histo__col {
    flex: 1;
    min-width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.bm-histo__bar-wrap {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: flex-end;
    background: var(--bg-sunken);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.bm-histo__bar {
    width: 100%;
    background: linear-gradient(180deg, var(--terra-300), var(--terra-400));
    transition: height var(--t-base) var(--ease-out);
}

.bm-histo__pct {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.bm-histo__label {
    margin: 0;
    font-size: var(--text-2xs);
    color: var(--text-mute);
    text-align: center;
}

/* EBITDA */
.bm-ebitda {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
}

.bm-ebitda__metric {
    background: var(--bg-sunken);
    padding: var(--s-3);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bm-ebitda__metric--highlight {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
}

.bm-ebitda__label {
    font-size: var(--text-2xs);
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--fw-semibold);
}

.bm-ebitda__value {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.bm-ebitda__breakdown {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--text-sm);
}

.bm-ebitda__breakdown li {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid var(--line);
}

.bm-ebitda__breakdown li:last-child { border-bottom: 0; }

/* Leaderboard */
.bm-leaderboard__wrap {
    overflow-x: auto;
    padding: 0 0 var(--s-3);
}

.bm-leaderboard {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.bm-leaderboard thead {
    background: var(--bg-sunken);
}

.bm-leaderboard th {
    text-align: left;
    padding: var(--s-2) var(--s-3);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--text-mute);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.bm-leaderboard__right { text-align: right; }

.bm-leaderboard tbody td {
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

/* Conformidade */
.bm-compliance {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.bm-compliance__item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--s-3);
    align-items: center;
    padding: var(--s-2) var(--s-3);
    background: var(--bg-sunken);
    border-radius: var(--r-sm);
}

.bm-compliance__label {
    font-size: var(--text-sm);
    color: var(--text);
}

.bm-compliance__value {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

/* =====================================================
   Compat: ainda há lugares usando .benchmarks-window e tabelas legadas
   ===================================================== */
.benchmarks-window {
    font-size: var(--text-xs);
    color: var(--text-mute);
}

/* =====================================================
   Toggle Executivo/Drill-down (segmented control)
   ===================================================== */
.benchmarks-view-toggle {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg-raised);
}

.benchmarks-view-toggle__btn {
    background: var(--bg-raised);
    border: 0;
    padding: 6px var(--s-3);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--text-mute);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
    min-height: 32px;
}

.benchmarks-view-toggle__btn:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.benchmarks-view-toggle__btn.is-active {
    background: var(--cafe-100);
    color: var(--cafe-text);
}

[data-theme="dark"] .benchmarks-view-toggle__btn.is-active {
    background: var(--accent);
    color: var(--accent-fg);
}

/* Deep view: 1 coluna no desktop, narrativa expandida */
@media (min-width: 768px) {
    .benchmarks-grid--deep {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1280px) {
    .benchmarks-grid--deep {
        grid-template-columns: 1fr;
    }
}

.bm-card--deep {
    /* When deep, give cards more breathing room */
    padding: var(--s-5);
}

.bm-card__drill {
    background: var(--bg-sunken);
    border-radius: var(--r-sm);
    padding: var(--s-3);
    font-size: var(--text-xs);
    color: var(--text-mute);
    line-height: var(--lh-snug);
    margin-top: var(--s-2);
}

.bm-card__drill-title {
    margin: 0 0 4px;
    color: var(--text);
    font-size: var(--text-sm);
}

.bm-card__drill-text {
    margin: 0;
}

/* =====================================================
   Cohort full-width (fora do trio)
   ===================================================== */
.bm-cohort-full {
    margin-top: var(--s-2);
}

.bm-cohort-full__hint {
    font-size: var(--text-xs);
    color: var(--text-faint);
    text-align: right;
    flex: 1;
    max-width: 360px;
}

.bm-cohort-full__intro {
    padding: 0 var(--s-5) var(--s-3);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--s-3);
}

.bm-cohort-full__intro p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-mute);
    line-height: var(--lh-snug);
    max-width: 720px;
}

.bm-cohort-full__intro strong {
    color: var(--text);
    font-weight: var(--fw-semibold);
}

.bm-cohort-full__intro em {
    font-style: normal;
    background: var(--bg-sunken);
    padding: 1px 5px;
    border-radius: var(--r-xs);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text);
}

/* Cohort table maior — célula 36×36 com gap 2px (igual ao design) */
.bm-cohort-full .bm-cohort__wrap {
    padding: 0 var(--s-5) var(--s-5);
}

.bm-cohort-full .bm-cohort {
    border-spacing: 2px;
    border-collapse: separate;
}

.bm-cohort-full .bm-cohort thead th {
    padding: 4px 8px;
    text-align: center;
    border-bottom: 0;
    min-width: 40px;
}

.bm-cohort-full .bm-cohort thead th:first-child,
.bm-cohort-full .bm-cohort thead th:nth-child(2) {
    text-align: left;
}

.bm-cohort-full .bm-cohort tbody td {
    padding: 0;
    border-bottom: 0;
    min-width: 40px;
    height: 36px;
    text-align: center;
    font-size: var(--text-sm);
}

.bm-cohort-full .bm-cohort__label {
    text-align: left !important;
    padding: 4px 8px !important;
    font-weight: var(--fw-medium);
}

.bm-cohort-full .bm-cohort__num {
    text-align: right !important;
    padding: 4px 8px !important;
    color: var(--text-mute);
}

.bm-cohort-full .bm-cohort__cell {
    border-radius: 3px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    transition: transform var(--t-fast) var(--ease-out);
}

.bm-cohort-full .bm-cohort__cell:hover {
    transform: scale(1.05);
    cursor: default;
}

.bm-cohort-full .bm-cohort__cell--empty {
    color: var(--text-faint);
    background: transparent;
}