/* App Store Optimization page (aso.js). Uses the tokens from admin.css. */

.aso-tabs .nav-link { color: var(--text-2); font-weight: 500; }
.aso-tabs .nav-link.active { background: var(--accent); color: var(--on-accent); }
.aso-badge { background: var(--bad); color: #fff; font-size: .6875rem; }
.aso-tabs .nav-link.active .aso-badge { background: #fff; color: var(--bad); }

.aso-status { min-width: 220px; max-width: 360px; }
.aso-progress { height: 4px; margin-top: 4px; }
.aso-progress-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aso-errs summary { cursor: pointer; list-style: none; }
.aso-errs summary::-webkit-details-marker { display: none; }
.aso-errs ul { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 8px 8px 24px; margin-top: 4px; max-height: 220px; overflow: auto; }

.stat-of { font-size: .9rem; color: var(--text-3); font-weight: 500; }
.aso-kpi-link { cursor: pointer; transition: border-color .15s; }
.aso-kpi-link:hover { border-color: var(--accent); }

.aso-add { min-width: 280px; }
.aso-add .form-control { min-width: 220px; }
.aso-seg .btn { font-weight: 500; }

.aso-table th { font-size: .75rem; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.aso-table td { white-space: nowrap; }
.aso-table tr[role="button"] { cursor: pointer; }
.aso-rank { font-weight: 600; font-variant-numeric: tabular-nums; }
.aso-cell { cursor: pointer; }
.aso-cell:hover { background: var(--surface-2); }
.aso-top { max-width: 220px; }
.aso-top .text-truncate { display: inline-block; max-width: 170px; vertical-align: middle; }
.aso-del { opacity: .35; }
tr:hover .aso-del { opacity: 1; }
.aso-row-mine > td { background: var(--accent-soft) !important; }
.aso-app-name { max-width: 200px; }
.min-w-0 { min-width: 0; }

.aso-icon { border-radius: 22%; flex: 0 0 auto; object-fit: cover; background: var(--surface-3); vertical-align: middle; }
.aso-icon-empty { display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); }
.aso-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 0 2px var(--surface); }

.aso-delta { display: inline-flex; align-items: center; gap: 1px; font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.aso-delta .bi { font-size: .625rem; }
.aso-delta.is-up { color: var(--good); }
.aso-delta.is-down { color: var(--bad); }
.aso-delta.is-neutral { color: var(--text-2); }
.aso-delta.is-flat { color: var(--text-3); font-weight: 500; }

/* Status chips: icon + label, never colour alone. */
.aso-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 600; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.aso-chip.is-critical { background: rgba(208, 59, 59, .12); color: #b42323; }
.aso-chip.is-serious { background: rgba(236, 131, 90, .16); color: #a4461f; }
.aso-chip.is-good { background: rgba(12, 163, 12, .12); color: #0a7a0a; }
.aso-chip.is-neutral { background: var(--surface-3); color: var(--text-2); }
[data-bs-theme="dark"] .aso-chip.is-critical { color: #f08a8a; background: rgba(208, 59, 59, .2); }
[data-bs-theme="dark"] .aso-chip.is-serious { color: #f2a37f; background: rgba(236, 131, 90, .18); }
[data-bs-theme="dark"] .aso-chip.is-good { color: #5fd35f; background: rgba(12, 163, 12, .18); }

.aso-spark { display: block; overflow: visible; }
.aso-spark-empty { font-size: .75rem; }

.aso-chart { position: relative; height: 240px; }
.aso-chart-lg { position: relative; height: 340px; }
.aso-data-table { max-height: 320px; overflow-y: auto; margin-top: 12px; border-top: 1px solid var(--border); }
.aso-data-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; font-size: .75rem; color: var(--text-3); }
.aso-data-table td { font-variant-numeric: tabular-nums; font-size: .8125rem; }
.aso-table-btn { text-decoration: none; }

.aso-pick { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px 12px 3px 8px; font-size: .8125rem; cursor: pointer; background: var(--surface); color: var(--text-2); user-select: none; }
.aso-pick.is-on { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.aso-pick .form-check-input { margin-top: 0; }

/* Alerts */
.aso-events { margin: 0; }
.aso-event { display: flex; gap: 12px; padding: 12px 16px; cursor: pointer; align-items: flex-start; }
.aso-event + .aso-event { border-top: 1px solid var(--border); }
.aso-event:hover { background: var(--surface-2); }
.aso-event.is-unseen { box-shadow: inset 3px 0 0 var(--accent); }
.aso-event-detail { white-space: normal; word-break: break-word; }
.aso-sev { flex: 0 0 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: .875rem; }
.aso-sev.is-critical { background: rgba(208, 59, 59, .12); color: #d03b3b; }
.aso-sev.is-serious { background: rgba(250, 178, 25, .18); color: #b07600; }
.aso-sev.is-info { background: var(--surface-3); color: var(--text-3); }
[data-bs-theme="dark"] .aso-sev.is-serious { color: #fab219; }
.aso-alert-strip .aso-event { padding: 10px 16px; }

.aso-changes li { padding: 10px 16px; }
.aso-changes li + li { border-top: 1px solid var(--border); }
.aso-diff { font-size: .8125rem; display: flex; flex-direction: column; gap: 2px; }
.aso-diff del { color: var(--text-3); }
.aso-diff ins { text-decoration: none; color: var(--text); font-weight: 500; }

@media (max-width: 767.98px) {
    .aso-status { min-width: 0; max-width: 100%; order: 2; width: 100%; }
    .aso-add, .aso-add .form-control { min-width: 0; width: 100%; }
    .aso-chart-lg { height: 280px; }
}

.aso-add-msg { flex-basis: 100%; text-align: right; margin-top: -2px; }