/* EPCIS Audit results workspace.
   Findings used to render as one long stack of fully expanded cards, so a report with
   many findings became several screens of scrolling. The results now sit in a fixed
   frame: a sticky summary, a category rail, and one scrollable pane showing a single
   category at a time with each finding collapsed to one line. */

/* ---------- Summary ---------- */
.audit-summary {
    position: sticky;
    top: calc(var(--th-nav-height, 72px) + 8px);
    z-index: 12;
    background: var(--th-surface, #fff);
    border: 1px solid var(--th-border, rgba(15, 23, 42, .08));
    border-radius: var(--th-radius-md, 12px);
    box-shadow: var(--th-shadow-sm, 0 1px 3px rgba(15, 23, 42, .06));
    padding: .875rem 1rem;
}

.audit-grade {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: .5rem .75rem;
    border-radius: var(--th-radius-sm, 8px);
    line-height: 1.1;
}

.audit-grade .audit-grade-letter { font-size: 2rem; font-weight: 800; }

/* "68 / 100" is a numeric expression, so RTL must not reorder it into "100 / 68". */
.audit-grade .audit-grade-score {
    font-size: .75rem;
    opacity: .8;
    direction: ltr;
    unicode-bidi: isolate;
}

/* Severity chips double as filters, so they need an obvious pressed state. */
.audit-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--th-border-strong, rgba(15, 23, 42, .14));
    background: var(--th-surface, #fff);
    color: var(--th-text-2, #334155);
    border-radius: 999px;
    padding: .3rem .75rem;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

.audit-chip:hover { background: var(--th-surface-3, #f4f6fb); }
.audit-chip .audit-chip-dot { width: .55rem; height: .55rem; border-radius: 50%; flex: none; }
.audit-chip[aria-pressed="false"] { opacity: .45; }
.audit-chip[aria-pressed="false"] .audit-chip-dot { background: var(--th-text-muted, #94a3b8) !important; }

.audit-chip-fail[aria-pressed="true"]  { border-color: #dc3545; color: #b02a37; background: rgba(220, 53, 69, .08); }
.audit-chip-warn[aria-pressed="true"]  { border-color: #f59e0b; color: #a16207; background: rgba(245, 158, 11, .10); }
.audit-chip-info[aria-pressed="true"]  { border-color: #0dcaf0; color: #087990; background: rgba(13, 202, 240, .10); }

.audit-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    font-size: .8125rem;
    color: var(--th-text-3, #64748b);
}

/* Each stat is its own bidi run, so counts do not bleed into the neighbouring item. */
.audit-meta > span { unicode-bidi: isolate; }

.audit-trim-note {
    padding: .6rem .75rem;
    border-top: 1px solid var(--th-border, #e2e8f0);
    font-size: .8125rem;
    color: var(--th-text-3, #64748b);
}

/* ---------- File contents brief ---------- */
/* The brief is inset from the pane border. Unlike the error panes, which are one full-bleed
   table whose cells carry their own padding, this pane mixes headings, notes, chips and
   tables, and all of them sat hard against the border. Padding-top stays 0 so the tables'
   sticky heads still meet the top of the scroller with nothing showing above them. */
.audit-pane-body.is-brief { padding: 0 1rem 1rem; }

/* The trim and truncation notes bring their own padding, which would double up here. */
.audit-pane-body.is-brief .audit-trim-note { padding-inline: 0; }

/* Reuses .audit-meta for the stat row, so the brief and the summary read alike. */
.audit-brief-stats {
    padding-top: .75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--th-border, #e2e8f0);
    font-size: .875rem;
}

/* Wrapping flex items, not inline code: inline wrapping leaves no gap between rows, so a long
   GLN list ran together. The gap gives every chip clearance on all four sides. */
.audit-locations {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

/* Explains what a table leaves out. Sits under its heading, quieter than the rows it qualifies. */
.audit-brief-note {
    margin: -.25rem 0 .5rem;
    font-size: .78125rem;
    color: var(--th-text-3, #64748b);
}

/* Level filter above the container table. Quieter than the severity chips in the summary:
   this narrows one table, it does not re-filter the whole report. */
.audit-level-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-bottom: .625rem;
}

.audit-level-chip {
    border: 1px solid var(--th-border, #e2e8f0);
    background: var(--th-surface, #fff);
    color: var(--th-text-3, #64748b);
    border-radius: 999px;
    padding: .2rem .625rem;
    font-size: .78125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.audit-level-chip:hover { background: var(--th-surface-3, #f4f6fb); }

.audit-level-chip.active {
    border-color: var(--th-primary, #4f46e5);
    color: var(--th-primary, #4f46e5);
    background: rgba(79, 70, 229, .08);
}

/* The count is its own bidi run so "Pallets 240" does not reorder under RTL. */
.audit-level-count {
    unicode-bidi: isolate;
    opacity: .75;
    font-variant-numeric: tabular-nums;
}

.audit-brief-title {
    margin-bottom: .5rem;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--th-text-3, #64748b);
}

/* Identifiers stay left-to-right and self-contained under RTL, the same way the score does. */
.audit-brief-stats code,
.audit-table code {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ---------- Category rail ---------- */
.audit-rail {
    position: sticky;
    top: calc(var(--th-nav-height, 72px) + 130px);
    background: var(--th-surface, #fff);
    border: 1px solid var(--th-border, rgba(15, 23, 42, .08));
    border-radius: var(--th-radius-md, 12px);
    overflow: hidden;
}

.audit-rail-list {
    max-height: calc(100vh - var(--th-nav-height, 72px) - 230px);
    overflow-y: auto;
}

.audit-rail-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    border: 0;
    border-inline-start: 3px solid transparent;
    background: transparent;
    color: var(--th-text-2, #334155);
    text-align: start;
    padding: .55rem .85rem;
    font-size: .875rem;
    cursor: pointer;
}

.audit-rail-item:hover { background: var(--th-surface-3, #f4f6fb); }

.audit-rail-item.active {
    background: var(--th-indigo-50, #eef2ff);
    border-inline-start-color: var(--th-indigo-600, #4f46e5);
    color: var(--th-indigo-700, #4338ca);
    font-weight: 600;
}

.audit-rail-item[disabled] { opacity: .4; cursor: default; }
.audit-rail-item .audit-rail-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-rail-item .audit-rail-count { flex: none; font-size: .75rem; color: var(--th-text-3, #64748b); }
.audit-rail-item.active .audit-rail-count { color: inherit; }
.audit-rail-dot { width: .5rem; height: .5rem; border-radius: 50%; flex: none; }

/* ---------- Findings pane ---------- */
.audit-pane {
    background: var(--th-surface, #fff);
    border: 1px solid var(--th-border, rgba(15, 23, 42, .08));
    border-radius: var(--th-radius-md, 12px);
    overflow: hidden;
}

.audit-pane-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--th-divider, rgba(15, 23, 42, .06));
    background: var(--th-surface-2, #fbfcfe);
}

/* The pane scrolls on its own so the page itself stays roughly one screen tall. */
.audit-pane-body {
    max-height: calc(100vh - var(--th-nav-height, 72px) - 210px);
    min-height: 260px;
    overflow-y: auto;
}

.audit-finding { border-bottom: 1px solid var(--th-divider, rgba(15, 23, 42, .06)); }
.audit-finding:last-child { border-bottom: 0; }

.audit-finding-head {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: start;
    padding: .65rem 1rem;
    cursor: pointer;
    color: var(--th-text, #0f172a);
}

.audit-finding-head:hover { background: var(--th-surface-3, #f4f6fb); }
.audit-finding-head .audit-finding-title { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: .9375rem; }
.audit-finding-head .audit-caret { flex: none; color: var(--th-text-muted, #94a3b8); transition: transform .15s ease; }
.audit-finding.open .audit-caret { transform: rotate(90deg); }
[dir="rtl"] .audit-finding .audit-caret { transform: rotate(180deg); }
[dir="rtl"] .audit-finding.open .audit-caret { transform: rotate(90deg); }

.audit-finding-body { padding: 0 1rem .85rem 2.65rem; }
[dir="rtl"] .audit-finding-body { padding: 0 2.65rem .85rem 1rem; }
.audit-finding-body .audit-line { font-size: .85rem; margin-bottom: .35rem; }
.audit-finding-body code { font-size: .78rem; word-break: break-all; }

.audit-empty { padding: 3rem 1rem; text-align: center; color: var(--th-text-3, #64748b); }

/* Tabular panes (the CSV audits). The head pins to the top of the scrolling pane so the
   column meaning survives a long error list. */
.audit-table { font-size: .875rem; }
.audit-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--th-surface-2, #fbfcfe);
    border-bottom: 1px solid var(--th-border, rgba(15, 23, 42, .08));
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--th-text-3, #64748b);
    white-space: nowrap;
}

.audit-table td { vertical-align: top; }
.audit-table .audit-cell-value code { word-break: break-all; font-size: .8rem; }

.audit-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .75rem;
    border-top: 1px solid var(--th-divider, rgba(15, 23, 42, .06));
}

/* Collapsed input summary shown once a report is on screen. */
.audit-filebar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    background: var(--th-surface-2, #fbfcfe);
    border: 1px solid var(--th-border, rgba(15, 23, 42, .08));
    border-radius: var(--th-radius-md, 12px);
    padding: .6rem .9rem;
}

/* ---------- Narrow screens ----------
   Sticky panes and inner scrollers fight the page scroll on a phone, so both are
   released and the category rail becomes a horizontal strip above the findings. */
@media (max-width: 991.98px) {
    .audit-summary,
    .audit-rail { position: static; top: auto; }

    .audit-rail-list {
        display: flex;
        gap: .35rem;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding: .5rem;
        -webkit-overflow-scrolling: touch;
    }

    .audit-rail-item {
        flex: 0 0 auto;
        width: auto;
        border-inline-start: 0;
        border: 1px solid var(--th-border-strong, rgba(15, 23, 42, .14));
        border-radius: 999px;
        padding: .35rem .75rem;
        white-space: nowrap;
    }

    .audit-rail-item.active { border-color: var(--th-indigo-600, #4f46e5); }
    .audit-rail-item .audit-rail-name { max-width: 11rem; }
    .audit-pane-body { max-height: none; }

    /* Findings panes hold one category and are short enough to ride the page scroll.
       Tabular panes (the CSV audits) can run to hundreds of rows, so they keep their own
       scroller rather than turning the page into the long scroll this layout replaced. */
    .audit-pane-body.is-table { max-height: 70vh; }
}

/* Four columns do not fit a phone: squeezing them breaks values mid-token, and scrolling
   sideways hides the message, which is the column that carries the meaning. Each row
   becomes a stacked block instead, labelled from the cells' data-label. */
@media (max-width: 767.98px) {
    /* The stacked rows below carry .9rem of their own, so the brief's inset eases off rather
       than stacking two paddings deep on a 390px screen. */
    .audit-pane-body.is-brief { padding: 0 .5rem .75rem; }

    .audit-table thead { display: none; }

    .audit-table,
    .audit-table tbody,
    .audit-table tr,
    .audit-table td {
        display: block;
        width: 100%;
    }

    .audit-table tr {
        padding: .6rem .9rem;
        border-bottom: 1px solid var(--th-divider, rgba(15, 23, 42, .06));
    }

    .audit-table td {
        border: 0;
        padding: .1rem 0;
        font-size: .85rem;
    }

    .audit-table td[data-label]::before {
        content: attr(data-label) ": ";
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .02em;
        color: var(--th-text-3, #64748b);
        margin-inline-end: .3rem;
    }

    /* The message (and the field name on the summary pane) leads its block unlabelled. */
    .audit-table td.audit-cell-message {
        margin-bottom: .15rem;
        font-weight: 600;
    }
}

@media (max-width: 575.98px) {
    .audit-grade { min-width: 66px; }
    .audit-grade .audit-grade-letter { font-size: 1.6rem; }
    .audit-finding-body { padding-inline-start: 1rem; }
}