/* Analytics dashboard component styles.
   Extends metrics.css; designed for /editor/analytics/ and the account widget.
   Requires .editor-page--v2 on the section ancestor for vertical card spacing. */

/* ── Content area ────────────────────────────────────────── */
/* #aw-content is a sub-container inside .content-body; it needs its own
   grid gap because .content-body gap only covers its direct children. */
#aw-content {
    display: grid;
    gap: var(--control-gap-wide);
}

/* ── Summary grid ────────────────────────────────────────── */

.metric-card-grid--analytics {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

/* ── Tab switcher ────────────────────────────────────────── */

.analytics-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 2px solid var(--theme-border, #e0e0e0);
    padding-bottom: 4px;
}

.analytics-tab-btn--active,
.analytics-tab-btn--active:hover {
    background: var(--theme-text-accent, #3a7bd5);
    color: #fff;
    border-color: transparent;
}

/* ── Tab panels ──────────────────────────────────────────── */
/* Each panel replicates the grid/gap of .content-body so   */
/* nested .item-card elements get proper vertical spacing.  */

.analytics-tab-panel {
    display: grid;
    gap: 12px;
}

.analytics-tab-panel[hidden] {
    display: none;
}

/* Propagate editor surface tokens to cards inside panels */
.editor-page--v2 > .content-container > .content-body > .analytics-tab-panel > .item-card,
.editor-page--v2 > .content-container > .content-body > .analytics-tab-panel > .analytics-chart-row > .item-card {
    --item-card-bg: var(--editor-surface-section-bg);
    --item-card-border: var(--editor-surface-section-border);
}

/* ── Period switcher ─────────────────────────────────────── */

.analytics-period-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* No margin-bottom: parent .content-body { gap: 12px } handles vertical spacing */
}

.analytics-period-btn--active,
.analytics-period-btn--active:hover {
    background: var(--theme-text-accent, #3a7bd5);
    color: #fff;
    border-color: transparent;
}

/* ── State indicators ────────────────────────────────────── */

.analytics-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    color: var(--hierarchy-meta-color, #6b7280);
    font-size: var(--type-body-size, 14px);
    gap: 8px;
}

.analytics-error {
    padding: 12px 16px;
    background: var(--theme-surface-danger, #fff0f0);
    color: var(--theme-text-danger, #c0392b);
    border-radius: var(--surface-radius, 8px);
    font-size: var(--type-body-size, 14px);
}

/* ── Chart containers ────────────────────────────────────── */

.analytics-chart-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

/* Match direct-child item-card bg to the section-level style set by
   editor-page--v2 (which only applies to content-body > .item-card).
   Chart-row cards are nested one level deeper, so we set them explicitly. */
.analytics-chart-row__card {
    --item-card-bg: var(--editor-surface-section-bg, var(--theme-surface-subtle));
    --item-card-border: var(--editor-surface-section-border, 1px solid var(--theme-border-surface-panel));
}

.analytics-chart-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 6;
}

.analytics-chart-wrap--sm {
    aspect-ratio: 1 / 1;
    max-width: 300px;
    margin: 0 auto;
}

/* Horizontal bar chart for top-words — fixed height for predictable layout */
.analytics-chart-wrap--hbar {
    position: relative;
    width: 100%;
    height: 320px;
}

/* ── Card header (title + action on the same row) ────────── */

.analytics-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.analytics-card-header .text-title {
    margin: 0;
}

/* ── Coverage badge (step 17) ───────────────────────────── */

.analytics-coverage-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--type-label-size, 11px);
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.analytics-coverage-badge--in-dict {
    background: color-mix(in srgb, var(--theme-text-accent, #3a7bd5) 12%, transparent);
    color: var(--theme-text-accent, #3a7bd5);
}

.analytics-legend-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--type-label-size, 11px);
    color: var(--hierarchy-meta-color, #6b7280);
    margin-left: 4px;
}

/* ── Priority badge (step 21) ───────────────────────────── */

.analytics-priority-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--type-label-size, 11px);
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* add: word is entirely missing → danger red */
.analytics-priority-badge--add {
    background: color-mix(in srgb, var(--theme-text-danger, #c0392b) 12%, transparent);
    color: var(--theme-text-danger, #c0392b);
}

/* audio: word exists but no audio → warning orange */
.analytics-priority-badge--audio {
    background: color-mix(in srgb, #d97706 12%, transparent);
    color: #b45309;
}

/* examples: word + audio exist but no examples → teal */
.analytics-priority-badge--examples {
    background: color-mix(in srgb, var(--theme-text-accent, #3a7bd5) 10%, transparent);
    color: #0369a1;
}

/* search: full coverage, search indexing issue → muted */
.analytics-priority-badge--search {
    background: color-mix(in srgb, var(--hierarchy-meta-color, #6b7280) 12%, transparent);
    color: var(--hierarchy-meta-color, #6b7280);
}

/* ── Zero-result table ───────────────────────────────────── */

.analytics-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
    font-size: var(--type-body-size, 14px);
}

.analytics-table__th,
.analytics-table__td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--theme-border-surface-item, #e5e7eb);
    text-align: left;
    vertical-align: middle;
}

.analytics-table__th {
    font-size: var(--type-label-size, 11px);
    font-weight: var(--hierarchy-strong-weight, 600);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hierarchy-meta-color, #6b7280);
    background: transparent;
}

.analytics-table__td--count {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.analytics-table__td--lang {
    font-size: var(--type-label-size, 11px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hierarchy-meta-color, #6b7280);
}

.analytics-table__term {
    font-weight: 500;
    color: var(--theme-text-link, var(--theme-text-accent, #3a7bd5));
}

.analytics-table__term:hover {
    text-decoration: underline;
}

.analytics-table__empty {
    text-align: center;
    padding: 28px 12px;
    color: var(--hierarchy-meta-color, #6b7280);
}

/* ── Account widget — CSS sparkline ──────────────────────── */

.aw-sparkline {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 44px;
    padding: 4px 0;
}

.aw-sparkline__bar {
    flex: 1 1 0;
    min-width: 2px;
    background: var(--theme-text-accent, #3a7bd5);
    opacity: 0.65;
    border-radius: 2px 2px 0 0;
    transition: opacity 0.15s;
}

.aw-sparkline__bar:hover {
    opacity: 1;
}

/* ── Account widget — top-terms list ────────────────────── */

.aw-term-row {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) 2fr auto;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--theme-border-surface-item, #e5e7eb);
    font-size: var(--type-body-size, 14px);
}

.aw-term-row:last-child {
    border-bottom: none;
}

.aw-term-row__label {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aw-term-row__bar-wrap {
    background: var(--theme-border-surface-item, #e5e7eb);
    border-radius: 2px;
    height: 6px;
    overflow: hidden;
}

.aw-term-row__bar {
    display: block;
    height: 100%;
    background: var(--theme-text-accent, #3a7bd5);
    border-radius: 2px;
    opacity: 0.7;
}

.aw-term-row__count {
    font-size: var(--type-label-size, 11px);
    color: var(--hierarchy-meta-color, #6b7280);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* ── Public statistics funnel (step 22) ─────────────────── */

.stats-funnel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.stats-funnel__step {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
}

.stats-funnel__label {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--type-body-size, 14px);
    font-weight: 600;
    color: var(--hierarchy-strong-color, #111827);
}

.stats-funnel__bar-wrap {
    grid-column: 2;
    grid-row: 1 / span 2;
    background: var(--theme-border-surface-item, #e5e7eb);
    border-radius: 4px;
    height: 24px;
    overflow: hidden;
}

.stats-funnel__bar {
    display: block;
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.stats-funnel__bar--search {
    background: var(--theme-text-accent, #3a7bd5);
    opacity: 0.8;
}

.stats-funnel__bar--view {
    background: #3DAB8E;
    opacity: 0.85;
}

.stats-funnel__bar--audio {
    background: #F59E0B;
    opacity: 0.85;
}

.stats-funnel__value {
    grid-column: 3;
    grid-row: 1;
    font-size: var(--type-body-size, 14px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--hierarchy-strong-color, #111827);
    text-align: right;
    white-space: nowrap;
}

.stats-funnel__caption {
    grid-column: 1;
    grid-row: 2;
    font-size: var(--type-label-size, 11px);
    color: var(--hierarchy-meta-color, #6b7280);
    margin-top: 2px;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 600px) {
    .analytics-chart-wrap {
        aspect-ratio: 4 / 3;
    }
    .analytics-chart-wrap--sm {
        max-width: 100%;
    }
    .analytics-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .analytics-table__th:last-child,
    .analytics-table__td:last-child {
        display: none; /* hide "Add" column on very small screens */
    }
}

/* ── Backup page ─────────────────────────────────────────── */

.analytics-code-block {
    background: var(--theme-surface-quiet, #f5f5f5);
    border: 1px solid var(--theme-border, #e0e0e0);
    border-radius: 6px;
    padding: 12px 16px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12px;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
    color: var(--theme-text-primary, #111);
    margin: 0;
}