/**
 * Analytics — design handoff concept 1a, on the shared hub tokens.
 * Tokens, stage pills and the date popover come from messaging-ui.css and
 * broadcasts.css; this is the page layer.
 */

body.has-top-nav #main-content.p-4 {
    padding-top: calc(60px + 1.5rem) !important;
    background: var(--hub-canvas);
    min-height: 100vh;
}

/* ==========================================================================
   HEADER + DATE RANGE
   ========================================================================== */
.an-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.an-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--hub-ink);
    margin: 0 0 0.1875rem;
}

.an-subtitle {
    font-size: 0.8125rem;
    color: var(--hub-muted);
    margin: 0;
}

.an-header-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.an-range {
    position: relative;
}

.an-range-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--hub-line);
    border-radius: var(--hub-radius);
    background: #fff;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

.an-range-btn.open,
.an-range-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.an-range-label {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
}

.an-range-btn > .bi-chevron-down {
    font-size: 0.625rem;
    color: var(--hub-faint);
}

.an-range-panel {
    right: 0;
    width: 300px;
}

.an-range-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3125rem;
}

.an-range-compare {
    font-size: 0.6875rem;
    color: var(--hub-faint);
}

.an-icon-btn {
    width: 38px;
    height: 38px;
    flex: none;
    border: 1px solid var(--hub-line);
    border-radius: var(--hub-radius);
    background: #fff;
    color: var(--hub-muted);
    display: grid;
    place-items: center;
    font-size: 1rem;
}

.an-icon-btn:hover {
    border-color: #cfd6dd;
    color: var(--hub-ink);
}

/* ==========================================================================
   LAYOUT — the three rows of concept 1a
   ========================================================================== */
.an-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.an-card {
    background: #fff;
    border: 1px solid var(--hub-border);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
}

.an-row { display: grid; gap: 1.25rem; }
.an-row-2 { grid-template-columns: 1.4fr 1fr; }
.an-row-3 { grid-template-columns: 1fr 1.3fr 1fr; }
/* Offer funnel keeps a narrow column; Guest messages takes the rest */
.an-row-wide { grid-template-columns: 1fr 1.95fr; }
/* Written feedback and the rating it belongs to, evenly split */
.an-row-even { grid-template-columns: 1fr 1fr; }

@media (max-width: 1200px) {
    .an-row-2, .an-row-3, .an-row-wide, .an-row-even {
        grid-template-columns: minmax(0, 1fr);
    }
}

.an-stack { display: flex; flex-direction: column; }

.an-panel-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--hub-ink);
    margin-bottom: 0.875rem;
}

.an-panel-note {
    font-size: 0.75rem;
    color: var(--hub-muted);
    margin: -0.625rem 0 0.875rem;
}

.an-card-blurb {
    margin: -0.5rem 0 0.875rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--hub-muted);
}

.an-loading,
.an-empty {
    padding: 2.5rem;
    text-align: center;
    color: var(--hub-muted);
    font-size: 0.8125rem;
}

.an-empty-row {
    padding: 2rem 0;
    text-align: center;
    color: var(--hub-faint);
    font-size: 0.8125rem;
}

/* ==========================================================================
   ROW 1 — revenue hero beside the per-day strip, in one card
   ========================================================================== */
.an-hero {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 2rem;
    padding: 1.5rem;
}

@media (max-width: 992px) {
    .an-hero { grid-template-columns: minmax(0, 1fr); }
}

.an-hero-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.an-kicker {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hub-faint);
}

.an-hero-value {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--hub-ink);
}

.an-hero-delta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
}

.an-delta-pill {
    padding: 0.1875rem 0.5rem;
    border-radius: 99px;
    font-weight: 600;
    font-size: 0.75rem;
}

.an-delta-pill.is-up   { background: #e3f5ea; color: #15803d; }
.an-delta-pill.is-down { background: #fdeaea; color: #b42318; }
.an-delta-pill.is-flat { background: var(--hub-fill); color: var(--hub-muted); }

.an-hero-prev { color: var(--hub-muted); }

.an-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hub-border-soft);
}

.an-hero-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--hub-ink);
    line-height: 1.1;
}

.an-hero-stat-label {
    font-size: 0.75rem;
    color: var(--hub-muted);
    margin-top: 0.125rem;
    line-height: 1.3;
}

/* The marker sits beside the figure — the label column is too narrow to hold it
   without wrapping "offers converted" onto two lines */
.an-hero-stat-value .an-help { vertical-align: 0.35em; }

.an-hero-right {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

/* Per-day strip: bars on a baseline, ends labelled — no axes, as drawn.
   Each column is a full-height hit area, so a 2px bar is still easy to point at. */
.an-spark {
    display: flex;
    align-items: stretch;
    gap: 3px;
    height: 150px;
    border-bottom: 1px solid var(--hub-line);
}

.an-spark-col {
    flex: 1 1 0;
    min-width: 2px;
    display: flex;
    align-items: flex-end;
    border-radius: 2px;
    cursor: default;
}

.an-spark-col:hover {
    background: var(--hub-tint);
}

.an-spark-bar {
    width: 100%;
    background: var(--primary-color);
    border-radius: 2px 2px 0 0;
    pointer-events: none;
}

.an-spark-col:hover .an-spark-bar { background: #0b5ed7; }

.an-spark-bar.is-empty { background: transparent; }

.an-spark-axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: var(--hub-faint);
}

/* ==========================================================================
   ROW 2 — top upsells
   ========================================================================== */
.an-top-head,
.an-top-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 60px 90px 150px;
    gap: 0.75rem;
    align-items: center;
}

.an-top-head {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--hub-faint);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--hub-border);
}

.an-top-row {
    font-size: 0.875rem;
    padding: 0.6875rem 0;
    border-bottom: 1px solid var(--hub-border-soft);
}

.an-top-row:last-child { border-bottom: 0; }

.an-rank {
    color: var(--hub-faint);
    font-variant-numeric: tabular-nums;
}

.an-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.an-item-name {
    font-weight: 600;
    color: var(--hub-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.an-strong { font-weight: 700; color: var(--hub-ink); }

.an-share-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.an-share {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--hub-fill);
    overflow: hidden;
}

.an-share-bar {
    display: block;
    height: 100%;
    background: var(--primary-color);
    border-radius: 4px;
}

.an-share-num {
    flex: none;
    font-size: 0.8125rem;
    color: var(--hub-muted);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   ROW 2 — best day
   ========================================================================== */
.an-dow {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.625rem;
    align-items: end;
    flex: 1 1 auto;
    min-height: 160px;
}

.an-dow-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    gap: 0.375rem;
    text-align: center;
}

.an-dow-value {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--hub-muted);
    min-height: 1em;
}

.an-dow-col.is-best .an-dow-value { color: var(--primary-color); }

.an-dow-bar-wrap { display: flex; align-items: flex-end; flex: 1; }

.an-dow-bar {
    width: 100%;
    background: #dbe6fb;
    border-radius: 4px 4px 0 0;
    min-height: 2px;
}

.an-dow-col.is-best .an-dow-bar { background: var(--primary-color); }

.an-dow-name {
    font-size: 0.71875rem;
    color: var(--hub-faint);
}

/* ==========================================================================
   ROW 3 — funnel
   ========================================================================== */
.an-funnel {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.an-funnel-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.8125rem;
    margin-bottom: 0.3125rem;
}

.an-funnel-label { color: var(--hub-ink); }
.an-funnel-value { font-size: 0.9375rem; color: var(--hub-ink); }

.an-funnel-track {
    height: 8px;
    border-radius: 4px;
    background: var(--hub-fill);
    overflow: hidden;
}

.an-funnel-fill { height: 100%; border-radius: 4px; }
.an-funnel-fill.is-sent   { background: var(--primary-color); }
.an-funnel-fill.is-viewed { background: #60a5fa; }
.an-funnel-fill.is-bought { background: #15803d; }

.an-funnel-note {
    margin-top: 0.3125rem;
    font-size: 0.71875rem;
    color: var(--hub-faint);
}

/* ==========================================================================
   ROW 3 — AI assist, with the revenue split beneath it
   ========================================================================== */
.an-ai-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.an-stat-lead {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--hub-ink);
}

.an-stat-sub {
    font-size: 0.75rem;
    color: var(--hub-muted);
    margin-top: 0.1875rem;
}

.an-source-block { margin-top: auto; }



.an-source-title {
    font-size: 0.8125rem;
    color: var(--hub-ink);
    margin-bottom: 0.375rem;
}

.an-source-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--hub-fill);
}

.an-source-seg { display: block; height: 100%; }
.an-source-seg.is-ai         { background: #6d5dfc; }
.an-source-seg.is-staff      { background: #15803d; }
.an-source-seg.is-unanswered { background: #d1d5db; }
.an-source-seg.is-empty      { background: var(--hub-fill); }

/* Guest messages: donut beside the legend, then the rate, then the three
   workload figures on a rule beneath. */
.an-msg-split {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.an-donut {
    --an-donut-size: 148px;
    width: var(--an-donut-size);
    height: var(--an-donut-size);
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    /* The hole is a white disc on top, so the ring needs no SVG or library */
    position: relative;
}

.an-donut-hole {
    width: 62%;
    height: 62%;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
}

.an-donut-total {
    display: block;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--hub-ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.an-donut-label {
    display: block;
    font-size: 0.6875rem;
    color: var(--hub-faint);
}

.an-msg-right {
    flex: 1 1 300px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.an-msg-rate {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--hub-faint);
}

.an-msg-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hub-border-soft);
}

.an-msg-stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--hub-ink);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.an-msg-stat-label {
    display: block;
    font-size: 0.71875rem;
    color: var(--hub-muted);
    margin-top: 0.125rem;
}

/* No flex-basis here. The legend now sits inside .an-msg-right, a column
   flex, where `flex: 1 1 240px` was read as a 240px HEIGHT and shoved the
   daily rate to the bottom of the card, away from the total it describes. */
.an-msg-legend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.an-msg-key {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    color: var(--hub-muted);
}

.an-msg-key-label { flex: 1; }

.an-msg-key strong {
    color: var(--hub-ink);
    font-variant-numeric: tabular-nums;
}

.an-msg-key-pct {
    width: 3.25rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.an-msg-none { color: var(--hub-faint); font-size: 0.8125rem; }

.an-key {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex: none;
}

/* The legend swatches take their colour inline from the same values that
   build the donut, so the ring and the list can never drift apart. */
.an-key.is-ai         { background: #6d5dfc; }
.an-key.is-staff      { background: #15803d; }
.an-key.is-unanswered { background: #d1d5db; }

@media (max-width: 575.98px) {
    .an-msg-split { justify-content: center; }
    .an-msg-stats { gap: 1rem; }
}

/* ==========================================================================
   ROW 3 — guest rating
   ========================================================================== */
.an-rating {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.an-rating-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--hub-ink);
}

.an-rating-scale {
    font-size: 1rem;
    color: var(--hub-faint);
    font-weight: 500;
}

.an-link {
    margin-top: auto;
    padding-top: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.an-help {
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    margin-left: 0.25rem;
    border-radius: 50%;
    background: var(--hub-fill);
    color: var(--hub-muted);
    font-size: 0.5625rem;
    font-weight: 700;
    cursor: help;
    vertical-align: 1px;
}

.an-help:hover { background: var(--hub-tint); color: var(--primary-color); }

/* ==========================================================================
   WRITTEN FEEDBACK
   ========================================================================== */
.an-modal {
    border: 0;
    border-radius: 0.75rem;
    overflow: hidden;
}

.an-modal .modal-header {
    border-bottom: 1px solid var(--hub-border);
    padding: 1rem 1.25rem;
}

.an-modal .modal-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--hub-ink);
}

.an-feedback + .an-feedback {
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--hub-border-soft);
}

.an-feedback-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3125rem;
}

.an-feedback-who {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--hub-ink);
}

.an-feedback-when {
    margin-left: auto;
    font-size: 0.71875rem;
    color: var(--hub-faint);
}

.an-feedback-text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #374151;
}

/* ==========================================================================
   CHART TOOLTIP
   Fixed to the viewport so it is never clipped by a card, and shown on the
   first mouse event rather than after the browser's ~1s title delay.
   ========================================================================== */
.an-tip {
    position: fixed;
    z-index: 1080;
    pointer-events: none;
    background: var(--hub-ink);
    color: #fff;
    border-radius: 0.375rem;
    padding: 0.4375rem 0.625rem;
    font-size: 0.75rem;
    line-height: 1.35;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(17, 24, 39, .18);
}

.an-tip b {
    display: block;
    font-weight: 600;
}

.an-tip span {
    color: rgba(255, 255, 255, .75);
}


/* ==========================================================================
   WRITTEN FEEDBACK — its own panel beside the rating, one comment per row.
   It used to open in a modal, which meant the comments were never on screen
   next to the score they explain.
   ========================================================================== */
.an-feedback-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.an-feedback-count {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.an-score-filters {
    display: flex;
    gap: 0.375rem;
    flex: none;
}

.an-score-pill {
    border: 1px solid var(--hub-line);
    background: #fff;
    color: var(--hub-muted);
    border-radius: 99px;
    padding: 0.25rem 0.6875rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.an-score-pill:hover:not(.is-on) {
    border-color: #cfd6dd;
    color: var(--hub-ink);
}

.an-score-pill.is-on {
    background: var(--hub-ink);
    border-color: var(--hub-ink);
    color: #fff;
}

.an-feedback-list {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
}

.an-fb {
    display: flex;
    gap: 0.75rem;
    padding: 0.8125rem 0;
    border-top: 1px solid var(--hub-border-soft);
}

.an-fb:first-child { border-top: 0; padding-top: 0; }

.an-fb-score {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Same three bands as the filter pills, so a score and its filter agree */
.an-fb-score.is-9-10 { background: #e3f5ea; color: #15803d; }
.an-fb-score.is-6-8  { background: #fdf1dd; color: #b45309; }
.an-fb-score.is-1-5  { background: #fdeaed; color: #b3243c; }

.an-fb-body { min-width: 0; flex: 1; }

.an-fb-top {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    font-size: 0.8125rem;
    flex-wrap: wrap;
}

.an-fb-who { font-weight: 600; color: var(--primary-color); }
.an-fb-room { color: var(--hub-faint); }

.an-fb-when {
    margin-left: auto;
    color: var(--hub-faint);
    font-size: 0.75rem;
    white-space: nowrap;
}

.an-fb-text {
    margin: 0.1875rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--hub-ink);
}

.an-fb-text.is-empty { color: var(--hub-faint); font-style: italic; }

.an-feedback-more {
    align-self: center;
    margin-top: 0.875rem;
    border: 0;
    background: none;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* ==========================================================================
   RATING BANDS — where the scores sit, not just their average
   ========================================================================== */
.an-bands {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.125rem;
}

.an-band {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--hub-muted);
}

.an-band-label {
    flex: none;
    width: 3rem;
    font-variant-numeric: tabular-nums;
}

.an-band-track {
    flex: 1;
    height: 9px;
    border-radius: 99px;
    background: #eef1f4;
    overflow: hidden;
}

.an-band-fill {
    display: block;
    height: 100%;
    border-radius: 99px;
}

/* Same three bands as the feedback score chips and filter pills */
.an-band-fill.is-high { background: #2f7d4f; }
.an-band-fill.is-mid  { background: #e0a030; }
.an-band-fill.is-low  { background: #c2334d; }

.an-band-n {
    flex: none;
    width: 2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--hub-ink);
}

.an-rating-all {
    align-self: flex-start;
    margin-top: 1.125rem;
    border: 0;
    background: none;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* The all-ratings modal reuses the panel's row and filter styles; only the
   shell needs sizing so a long list scrolls inside the dialog. */
#an-ratings-modal .modal-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--hub-border);
}

#an-ratings-modal .modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--hub-ink);
}

#an-ratings-modal .an-feedback-list {
    margin-top: 0;
}

#an-ratings-modal .an-score-filters {
    flex-wrap: wrap;
}