/*
 * COA access polish. Presentation only: keep the existing records, filters,
 * report URLs, and native link behavior intact.
 */

@property --vp-et-coa-orbit {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* Without typed-property support the matching endpoints remain static. */
@keyframes vp-et-coa-outline-enter {
    from { --vp-et-coa-orbit: 0deg; }
    to { --vp-et-coa-orbit: 360deg; }
}

@keyframes vp-et-coa-outline-interact {
    from { --vp-et-coa-orbit: 0deg; }
    to { --vp-et-coa-orbit: 360deg; }
}

body.vp-evidence-trail-ui [data-vp-coa-catalog] {
    --vp-coa-muted: #a9bdca !important;
    --vp-coa-line: #294654 !important;
    --vp-coa-gold: #ff7433;
}

body.vp-evidence-trail-ui [data-vp-coa-catalog] ::selection {
    color: #ffffff;
    background: #16516c;
    text-shadow: none;
}

body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table-wrap {
    width: 100%;
    min-width: 0;
    overflow: visible !important;
    border-color: #294654 !important;
    background: #08131d !important;
    box-shadow: none;
}

/* The legacy 960px minimum placed the report column outside its 845px panel.
 * A fixed, wrapping table keeps every action in view without sideways scrolling.
 */
body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table th,
body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table td {
    padding: 15px 8px;
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: normal;
}

body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table th {
    position: static;
    background: #10212e !important;
    color: #f6fbfd !important;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.035em;
}

body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table th:nth-child(1) { width: 22%; }
body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table th:nth-child(2) { width: 12%; }
body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table th:nth-child(3) { width: 13%; }
body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table th:nth-child(4) { width: 12%; }
body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table th:nth-child(5) { width: 13%; }
body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table th:nth-child(6) { width: 14%; }
body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table th:nth-child(7) { width: 14%; }

body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table th:first-child {
    border-top-left-radius: 7px;
}

body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table th:last-child {
    border-top-right-radius: 7px;
}

body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table tbody tr {
    background: #08131d !important;
}

body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table tbody tr:nth-child(even) {
    background: #0c1c28 !important;
}

body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table tbody tr:hover,
body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table tbody tr:focus-within {
    background: #102d3c !important;
}

body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table td {
    border-color: #233d4a !important;
    color: #d9e8f0 !important;
}

body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-product {
    color: #f6fbfd;
    font-weight: 750;
}

body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table code {
    display: inline-block;
    max-width: 100%;
    padding: 4px 5px;
    border: 1px solid #345363;
    background: #102634;
    color: #d9ecf4;
    font-size: 11px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}

body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-method {
    max-width: 100%;
    padding: 4px 6px;
    border-color: #316065 !important;
    border-radius: 6px;
    background: #0e3337 !important;
    color: #c0f7f1 !important;
    font-size: 11px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}

body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-link {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    border: 1px solid transparent !important;
    border-radius: 8px;
    background:
        linear-gradient(#071b28, #071b28) padding-box,
        conic-gradient(from var(--vp-et-coa-orbit), transparent 0deg 245deg, rgba(61, 231, 245, 0.12) 270deg, #ff9a67 296deg, #3de7f5 312deg, #efffff 323deg, #61b4ff 334deg, transparent 348deg) border-box,
        linear-gradient(110deg, #ff7433 0%, #3de7f5 52%, #168cff 100%) border-box !important;
    color: #f6fbfd !important;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    text-decoration: none !important;
    white-space: normal;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 12px rgba(61, 231, 245, 0.12),
        0 0 18px rgba(255, 116, 51, 0.05);
    transition: background-color 160ms ease, box-shadow 160ms ease;
    animation: vp-et-coa-outline-enter 2600ms cubic-bezier(0.45, 0, 0.25, 1) 1 both;
}

/* A finite entrance pass, replayed on deliberate hover or keyboard focus. */
body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-link:is(:hover, :focus-visible) {
    animation: vp-et-coa-outline-interact 2200ms cubic-bezier(0.45, 0, 0.25, 1) 1 both;
}

body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-link:hover {
    background:
        linear-gradient(#123448, #123448) padding-box,
        conic-gradient(from var(--vp-et-coa-orbit), transparent 0deg 245deg, rgba(61, 231, 245, 0.12) 270deg, #ff9a67 296deg, #3de7f5 312deg, #efffff 323deg, #61b4ff 334deg, transparent 348deg) border-box,
        linear-gradient(110deg, #ff7433 0%, #3de7f5 52%, #168cff 100%) border-box !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 20px rgba(61, 231, 245, 0.2),
        0 0 24px rgba(22, 140, 255, 0.1);
}

body.vp-evidence-trail-ui [data-vp-coa-catalog] :is(.vp-coa-link, .vp-coa-clear, input, select):focus-visible {
    outline: 3px solid #3de7f5;
    outline-offset: 3px;
}

body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-field,
body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-field :is(input, select) {
    min-width: 0;
}

body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-field :is(input, select),
body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-clear {
    min-height: 46px;
    border-color: #526c7b !important;
    color: #f6fbfd !important;
}

body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-field input::placeholder {
    color: #a9bdca;
    opacity: 1;
}

/* Use the existing labeled record-card pattern before seven columns become
 * cramped. This is also the 200%-zoom layout; no record details are discarded.
 */
@media (max-width: 1199px) {
    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-tools {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-tools > .vp-coa-field:first-child {
        grid-column: 1 / -1;
    }

    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table-wrap {
        border: 0 !important;
        background: transparent !important;
    }

    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table,
    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table tbody,
    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table tr,
    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table thead {
        position: absolute !important;
        display: table-header-group !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table tbody tr {
        margin: 0 0 14px !important;
        padding: 16px !important;
        border: 1px solid #294654 !important;
        border-radius: 10px !important;
    }

    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table td {
        display: grid !important;
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 16px;
        align-items: center;
        padding: 10px 0 !important;
        border: 0 !important;
        border-top: 1px solid #233d4a !important;
        font-size: 14px;
        text-align: left !important;
    }

    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table td:first-child {
        padding-top: 0 !important;
        border-top: 0 !important;
    }

    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table td:last-child {
        padding-bottom: 0 !important;
    }

    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table td::before {
        color: #a9bdca;
        font-family: var(--vp-font-mono, ui-monospace, monospace);
        font-size: 10px;
        font-weight: 750;
        letter-spacing: 0.065em;
        line-height: 1.5;
        text-transform: uppercase;
    }

    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table td:nth-child(1)::before { content: "Product"; }
    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table td:nth-child(2)::before { content: "SKU"; }
    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table td:nth-child(3)::before { content: "Lot"; }
    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table td:nth-child(4)::before { content: "Analysis date"; }
    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table td:nth-child(5)::before { content: "Method"; }
    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table td:nth-child(6)::before { content: "Result"; }
    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table td:nth-child(7)::before { content: "COA"; }

    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table :is(code, .vp-coa-method) {
        width: fit-content;
        font-size: 12px;
    }

    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-link {
        min-height: 48px;
        font-size: 13px;
    }

    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-empty td {
        display: block !important;
        padding: 10px 0 !important;
        text-align: center !important;
    }

    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-empty td::before {
        content: none;
    }
}

@media (max-width: 480px) {
    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-tools {
        grid-template-columns: minmax(0, 1fr);
    }

    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table tbody tr {
        padding: 14px 12px !important;
    }

    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table td {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 12px;
        font-size: 13px;
    }
}

/* Keep the catalog's actual filtering authoritative over the card display. */
body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-table tbody tr[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-link {
        transition: none;
        animation: none !important;
        --vp-et-coa-orbit: 0deg;
    }
}

@media (forced-colors: active) {
    body.vp-evidence-trail-ui [data-vp-coa-catalog] .vp-coa-link {
        border: 2px solid LinkText !important;
        background: Canvas !important;
        color: LinkText !important;
        box-shadow: none !important;
        animation: none !important;
    }

    body.vp-evidence-trail-ui [data-vp-coa-catalog] :is(.vp-coa-link, .vp-coa-clear, input, select):focus-visible {
        outline-color: Highlight;
    }
}