/* aeo-audit: aeo-history — namespace for history.php (scan-history list).
 *
 * Round 32 introduced this file to fix three concrete visual bugs:
 *   1. Pages-column "fusion" — right-aligned numeric cell butted against
 *      a left-aligned timestamp cell with only `pr-4` between, reading as
 *      one fused string. .aeo-history__pages-cluster owns the spacing.
 *   2. Compare button looking gray/disabled — `btn-cstm-muted` is solid
 *      var(--bg-gray) which reads as disabled. .aeo-history__compare-btn
 *      is a soft-primary variant: tinted background, primary-color text,
 *      clear hover. Distinct from the strong page-level "Scan a URL"
 *      button at the top of history.php.
 *   3. Last-row "—" misreading as missing data — .aeo-history__first-scan
 *      is an explicit pill that says "First scan" so the user understands
 *      why the action is unavailable on the oldest row.
 *
 * Also adds row-hover, dark-mode parity, and a header-strip layout that
 * matches the visual rhythm of page-detail.php's section heads.
 */

/* ----- Header strip ----------------------------------------------------- */
.aeo-history__header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.aeo-history__header-icon {
    font-size: 1.5rem;
    color: var(--txt-primary);
    margin-top: 0.125rem;
    flex-shrink: 0;
}
.aeo-history__header-body {
    flex: 1 1 auto;
    min-width: 0;
}
.aeo-history__header-crumbs {
    font-size: 0.75rem;
    color: rgb(107 114 128);
    margin-bottom: 0.25rem;
}
.dark .aeo-history__header-crumbs { color: rgb(156 163 175); }
.aeo-history__header-crumbs a:hover {
    color: var(--txt-primary);
    text-decoration: underline;
}
.aeo-history__header-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    color: rgb(31 41 55);
}
.dark .aeo-history__header-title { color: rgb(243 244 246); }
.aeo-history__header-meta {
    font-size: 0.75rem;
    color: rgb(107 114 128);
    margin-top: 0.125rem;
}
.dark .aeo-history__header-meta { color: rgb(156 163 175); }

/* ----- Table primitives ------------------------------------------------- */
.aeo-history__table-wrap {
    width: 100%;
    overflow-x: auto;
}
.aeo-history__table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
}
.aeo-history__table thead tr {
    text-align: left;
    border-bottom: 1px solid rgb(229 231 235);
}
.dark .aeo-history__table thead tr { border-bottom-color: rgb(75 85 99); }
.aeo-history__table th {
    padding: 0.625rem 1rem 0.625rem 0;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: rgb(156 163 175);
    white-space: nowrap;
}
.aeo-history__table td {
    padding: 0.875rem 1rem 0.875rem 0;
    vertical-align: top;
    border-bottom: 1px solid rgb(243 244 246);
}
.dark .aeo-history__table td { border-bottom-color: rgb(55 65 81); }
.aeo-history__table tbody tr:hover {
    background-color: rgb(249 250 251);
}
.dark .aeo-history__table tbody tr:hover {
    background-color: rgb(55 65 81);
}
.aeo-history__table th:last-child,
.aeo-history__table td:last-child {
    padding-right: 0;
}

/* Numeric / right-aligned columns */
.aeo-history__cell--right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.aeo-history__cell--actions {
    text-align: right;
    white-space: nowrap;
}

/* ----- Job cell --------------------------------------------------------- */
.aeo-history__job-id {
    font-weight: 600;
    color: rgb(31 41 55);
}
.dark .aeo-history__job-id { color: rgb(243 244 246); }
.aeo-history__job-url {
    margin-top: 0.125rem;
    max-width: 18rem;
    font-size: 0.75rem;
    color: rgb(156 163 175);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----- Score cell ------------------------------------------------------- */
.aeo-history__score {
    font-weight: 700;
    font-size: 1rem;
    color: rgb(31 41 55);
    font-variant-numeric: tabular-nums;
}
.dark .aeo-history__score { color: rgb(243 244 246); }
.aeo-history__score--missing {
    font-weight: 400;
    color: rgb(156 163 175);
}

/* ----- Pages-column cluster (Bug 1 fix) -------------------------------- */
/* Inline numeric cluster with explicit gap so it can't visually fuse with
 * the next column's content. Tabular-nums keeps `35 / 35` aligned vertically
 * across rows even when one row has 5 / 35. */
.aeo-history__pages-cluster {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    padding-right: 1rem; /* extra right gutter on top of <td>'s pr-4-equivalent */
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    color: rgb(75 85 99);
    white-space: nowrap;
}
.dark .aeo-history__pages-cluster { color: rgb(209 213 219); }
.aeo-history__pages-cluster-fraction {
    font-weight: 600;
    color: rgb(55 65 81);
}
.dark .aeo-history__pages-cluster-fraction { color: rgb(229 231 235); }
.aeo-history__pages-cluster-failed {
    color: rgb(220 38 38);
    font-weight: 500;
}
.dark .aeo-history__pages-cluster-failed { color: #fca5a5; }

/* ----- Timestamp cells -------------------------------------------------- */
.aeo-history__timestamp {
    font-size: 0.75rem;
    color: rgb(107 114 128);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dark .aeo-history__timestamp { color: rgb(156 163 175); }

/* ----- Compare button (Bug 2 fix) -------------------------------------- */
/* Soft-primary variant: tinted bg, primary text, primary border. Calmer
 * than btn-cstm-primary at row-multiplicity but unmistakably an action. */
.aeo-history__compare-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    background-color: rgba(var(--bg-primary-rgb), 0.08);
    color: var(--txt-primary);
    border: 1px solid rgba(var(--bg-primary-rgb), 0.2);
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.aeo-history__compare-btn:hover {
    background-color: rgba(var(--bg-primary-rgb), 0.16);
    border-color: rgba(var(--bg-primary-rgb), 0.4);
    color: var(--txt-primary-dark);
}
.aeo-history__compare-btn:focus-visible {
    outline: 2px solid var(--bg-primary);
    outline-offset: 2px;
}
.dark .aeo-history__compare-btn {
    background-color: rgba(var(--bg-primary-rgb), 0.16);
    color: var(--txt-primary-light);
    border-color: rgba(var(--bg-primary-rgb), 0.35);
}
.dark .aeo-history__compare-btn:hover {
    background-color: rgba(var(--bg-primary-rgb), 0.28);
    border-color: rgba(var(--bg-primary-rgb), 0.55);
}
.aeo-history__compare-btn iconify-icon {
    font-size: 0.875rem;
    line-height: 1;
}

/* ----- "First scan" pill (Bug 3 fix) ----------------------------------- */
.aeo-history__first-scan {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    background-color: rgb(243 244 246);
    color: rgb(107 114 128);
    cursor: help;
}
.dark .aeo-history__first-scan {
    background-color: rgb(55 65 81);
    color: rgb(156 163 175);
}
.aeo-history__first-scan iconify-icon {
    font-size: 0.75rem;
    line-height: 1;
}

/* ----- Empty state ------------------------------------------------------ */
.aeo-history__empty {
    padding: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: rgb(107 114 128);
    border: 1px dashed rgb(229 231 235);
    border-radius: 0.5rem;
}
.dark .aeo-history__empty {
    color: rgb(156 163 175);
    border-color: rgb(75 85 99);
}

/* ----- Pagination footer ----------------------------------------------- */
.aeo-history__pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: rgb(107 114 128);
}
.dark .aeo-history__pager { color: rgb(156 163 175); }
.aeo-history__pager-actions {
    display: flex;
    gap: 0.5rem;
}

/* Inline Upgrade CTA in the scan-cap note (part of the shared CTA system,
   not a bare link): brand-colored, weighted, sparkles icon. */
.aeo-history__cap-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--txt-primary);
    font-weight: 600;
}

.aeo-history__cap-cta:hover {
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .aeo-history__compare-btn { transition: none; }
}