/*
 * QC Test widget — [ivar_qc_widget].
 *
 * Mọi màu/font đi qua token --qcw-*. Theme `ivar` lấy màu ERP; theme `hithean`
 * lấy từ landing an-new-chapter (hithean-roneous-child-theme/css/custom.css):
 * dark-blue #0047ba, light-blue #b0dded, dark-brown #2e1203, green-dark #00843d,
 * red #bf1f33, tiêu đề Oswald viết hoa, thân Be Vietnam.
 */
.ivar-qc-widget,
.ivar-qc-widget__dialog {
    --qcw-accent: var(--erp-color-primary, #0f766e);
    --qcw-accent-soft: #e6f4f2;
    --qcw-ink: #10231f;
    --qcw-text: #334155;
    --qcw-muted: #64748b;
    --qcw-border: rgba(15, 23, 42, 0.1);
    --qcw-surface: #fff;
    --qcw-surface-alt: #f7f9f9;
    --qcw-pass: #15803d;
    --qcw-pass-bg: #dcfce7;
    --qcw-fail: #b91c1c;
    --qcw-fail-bg: #fef2f2;
    --qcw-info: #0f766e;
    --qcw-info-bg: #e6f4f2;
    --qcw-pending: #92400e;
    --qcw-pending-bg: #fef3c7;
    --qcw-font-body: inherit;
    --qcw-font-heading: inherit;
    --qcw-heading-transform: none;
    --qcw-heading-spacing: 0;
    --qcw-radius: 0; /* mọi góc bo của widget đi qua biến này */
}

.ivar-qc-widget.is-theme-hithean,
.ivar-qc-widget__dialog.is-theme-hithean {
    --qcw-accent: #0047ba;
    --qcw-accent-soft: rgba(176, 221, 237, 0.35);
    --qcw-ink: #2e1203;
    --qcw-text: #36454f;
    --qcw-muted: #5f6b73;
    --qcw-border: rgba(19, 81, 80, 0.12);
    --qcw-surface-alt: #f7f6f2;
    --qcw-pass: #00843d;
    --qcw-pass-bg: #d3e6e0;
    --qcw-fail: #bf1f33;
    --qcw-fail-bg: #fbe9eb;
    --qcw-info: #0047ba;
    --qcw-info-bg: rgba(176, 221, 237, 0.45);
    --qcw-font-body: 'Be Vietnam', 'Be Vietnam Pro', system-ui, sans-serif;
    --qcw-font-heading: 'Oswald', 'Be Vietnam Pro', sans-serif;
    --qcw-heading-transform: uppercase;
    --qcw-heading-spacing: 0.04em;
    --qcw-radius: 0;
}

/* ---------- Nút mở ---------- */
.ivar-qc-widget { display: inline-flex; max-width: 100%; font-family: var(--qcw-font-body); }

.ivar-qc-widget__badge {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    min-width: min(320px, 100%);
    border: 1px solid var(--qcw-border);
    border-radius: var(--qcw-radius);
    background: var(--qcw-surface);
    color: var(--qcw-ink);
    cursor: pointer;
    font: inherit;
    padding: 8px 16px 8px 8px;
    text-align: left;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ivar-qc-widget__badge:hover,
.ivar-qc-widget__badge:focus-visible { border-color: var(--qcw-accent); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); }
.ivar-qc-widget__badge:focus-visible { outline: 2px solid var(--qcw-accent); outline-offset: 2px; }

.ivar-qc-widget__badge-icon {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: var(--qcw-radius);
    background: var(--qcw-accent-soft);
    color: var(--qcw-accent);
    font-size: 17px;
    font-weight: 700;
}
.ivar-qc-widget__badge.is-pass .ivar-qc-widget__badge-icon { background: var(--qcw-pass-bg); color: var(--qcw-pass); }

.ivar-qc-widget__badge-text { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ivar-qc-widget__badge-main {
    /* Tên đơn vị dài xuống dòng thay vì bị cắt — tên đơn vị là ý chính của nút. */
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    font-family: var(--qcw-font-heading);
    text-transform: var(--qcw-heading-transform);
    letter-spacing: var(--qcw-heading-spacing);
    font-size: 13px;
    font-weight: 600;
}
.ivar-qc-widget__badge-sub {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--qcw-muted);
    font-size: 12px;
    line-height: 1.35;
}
.ivar-qc-widget__badge-agency { color: var(--qcw-accent); font-weight: 700; }
.ivar-qc-widget__badge.is-pass .ivar-qc-widget__badge-sub { color: var(--qcw-pass); font-weight: 600; }
.ivar-qc-widget__badge-arrow { color: var(--qcw-accent); font-size: 18px; line-height: 1; }

/* ---------- Hộp thoại ---------- */
.ivar-qc-widget__dialog {
    width: min(600px, calc(100vw - 24px));
    max-height: calc(100vh - 32px);
    border: 0;
    border-radius: var(--qcw-radius);
    padding: 0;
    background: var(--qcw-surface);
    color: var(--qcw-text);
    font-family: var(--qcw-font-body);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.ivar-qc-widget__dialog::backdrop { background: rgba(15, 23, 42, 0.55); }

.ivar-qc-widget__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 0;
}
.ivar-qc-widget__brand { display: grid; gap: 10px; min-width: 0; }
.ivar-qc-widget__agency-logo { display: block; max-width: 120px; max-height: 34px; width: auto; height: auto; object-fit: contain; }
.ivar-qc-widget__eyebrow {
    margin: 0;
    color: var(--qcw-accent);
    font-family: var(--qcw-font-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ivar-qc-widget__close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--qcw-radius);
    background: var(--qcw-surface-alt);
    color: var(--qcw-muted);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}
.ivar-qc-widget__close:hover { color: var(--qcw-ink); }

.ivar-qc-widget__body { display: grid; gap: 18px; padding: 10px 22px 22px; }

.ivar-qc-widget__intro { display: grid; gap: 8px; }
.ivar-qc-widget__intro h3 {
    margin: 0;
    color: var(--qcw-ink);
    font-family: var(--qcw-font-heading);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: var(--qcw-heading-spacing);
    text-transform: var(--qcw-heading-transform);
    text-wrap: balance;
}
.ivar-qc-widget__intro p { margin: 0; color: var(--qcw-muted); font-size: 14px; line-height: 1.55; }

.ivar-qc-widget__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.ivar-qc-widget__chip {
    border: 1px solid var(--qcw-border);
    border-radius: var(--qcw-radius);
    background: var(--qcw-surface-alt);
    color: var(--qcw-text);
    font-size: 12px;
    padding: 4px 10px;
}

/* Kết luận chung */
.ivar-qc-widget__final-result {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--qcw-radius);
    background: var(--qcw-pending-bg);
    color: var(--qcw-pending);
    font-size: 15px;
    font-weight: 700;
    padding: 12px 14px;
}
.ivar-qc-widget__final-result.is-pass { background: var(--qcw-pass-bg); color: var(--qcw-pass); }
.ivar-qc-widget__final-result.is-fail { background: var(--qcw-fail-bg); color: var(--qcw-fail); }

/* Danh sách nhóm chỉ tiêu */
.ivar-qc-widget__groups { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ivar-qc-widget__group {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--qcw-border);
    border-radius: var(--qcw-radius);
    background: var(--qcw-surface);
    padding: 14px 16px;
}
.ivar-qc-widget__group-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--qcw-radius);
    background: var(--qcw-pending-bg);
    color: var(--qcw-pending);
    font-size: 14px;
    font-weight: 700;
}
.ivar-qc-widget__group-name {
    display: block;
    color: var(--qcw-ink);
    font-family: var(--qcw-font-heading);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: var(--qcw-heading-spacing);
    text-transform: var(--qcw-heading-transform);
}
.ivar-qc-widget__group-desc { display: block; margin-top: 2px; color: var(--qcw-muted); font-size: 12.5px; line-height: 1.45; }
.ivar-qc-widget__status {
    border-radius: var(--qcw-radius);
    background: var(--qcw-pending-bg);
    color: var(--qcw-pending);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    text-align: center;
    white-space: nowrap;
}

.ivar-qc-widget__group.is-pass .ivar-qc-widget__group-icon,
.ivar-qc-widget__group.is-pass .ivar-qc-widget__status { background: var(--qcw-pass-bg); color: var(--qcw-pass); }
.ivar-qc-widget__group.is-fail .ivar-qc-widget__group-icon,
.ivar-qc-widget__group.is-fail .ivar-qc-widget__status { background: var(--qcw-fail-bg); color: var(--qcw-fail); }
.ivar-qc-widget__group.is-fail { border-color: var(--qcw-fail); }
.ivar-qc-widget__group.is-match .ivar-qc-widget__group-icon,
.ivar-qc-widget__group.is-match .ivar-qc-widget__status,
.ivar-qc-widget__group.is-info .ivar-qc-widget__group-icon,
.ivar-qc-widget__group.is-info .ivar-qc-widget__status { background: var(--qcw-info-bg); color: var(--qcw-info); }

.ivar-qc-widget__admin-note {
    border-left: 3px solid var(--qcw-pending);
    background: var(--qcw-pending-bg);
    color: var(--qcw-pending);
    font-size: 12.5px;
    line-height: 1.5;
    padding: 8px 12px;
}

/* Chân: PDF gốc */
.ivar-qc-widget__files { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--qcw-border); padding-top: 14px; }
.ivar-qc-widget__file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    border: 1.5px solid var(--qcw-accent);
    border-radius: var(--qcw-radius);
    color: var(--qcw-accent);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    text-decoration: none;
}
.ivar-qc-widget__file:hover { background: var(--qcw-accent); color: #fff; }
.ivar-qc-widget__empty { color: var(--qcw-muted); font-size: 13px; }

/* Logo đơn vị kiểm nghiệm thay icon ✓ */
.ivar-qc-widget__badge-icon.has-logo { background: #fff; border: 0; overflow: hidden; padding: 3px; }
.ivar-qc-widget__badge-icon.has-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ivar-qc-widget__badge.is-pass .ivar-qc-widget__badge-icon.has-logo { background: #fff; }

/* "Kiểm nghiệm tại [logo] Tên đơn vị · Xem thêm" */
.ivar-qc-widget__lab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 14px; color: var(--qcw-text); }
.ivar-qc-widget__lab-label { color: var(--qcw-muted); }
.ivar-qc-widget__lab-link { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; background: none; color: var(--qcw-ink); font: inherit; text-align: left; }
button.ivar-qc-widget__lab-link { cursor: pointer; }
.ivar-qc-widget__lab-logo { display: block; flex: 0 0 28px; width: 28px; height: 28px; border: 0; border-radius: var(--qcw-radius); background: #fff; object-fit: contain; padding: 2px; box-sizing: border-box; }
.ivar-qc-widget__lab-name { font-weight: 700; }
button.ivar-qc-widget__lab-link .ivar-qc-widget__lab-name { text-decoration: underline; text-decoration-color: var(--qcw-border); text-underline-offset: 3px; }
button.ivar-qc-widget__lab-link:hover .ivar-qc-widget__lab-name { color: var(--qcw-accent); text-decoration-color: currentColor; }
.ivar-qc-widget__lab-more { margin: 0; padding: 0; border: 0; background: none; color: var(--qcw-accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ivar-qc-widget__lab-more:hover { text-decoration: underline; }

/* Popup thông tin đơn vị */
.ivar-qc-widget__lab-head { display: flex; align-items: center; gap: 14px; }
.ivar-qc-widget__lab-head h3 { margin: 0 0 4px; color: var(--qcw-ink); font-family: var(--qcw-font-heading); font-size: 20px; line-height: 1.3; }
.ivar-qc-widget__lab-head-logo { flex: 0 0 64px; width: 64px; height: 64px; border: 0; border-radius: var(--qcw-radius); background: #fff; object-fit: contain; padding: 4px; box-sizing: border-box; }
.ivar-qc-widget__lab-intro { color: var(--qcw-text); font-size: 14px; line-height: 1.6; }
.ivar-qc-widget__lab-intro > :first-child { margin-top: 0; }
.ivar-qc-widget__lab-intro > :last-child { margin-bottom: 0; }
.ivar-qc-widget__lab-intro a { color: var(--qcw-accent); }
.ivar-qc-widget__lab-intro img { max-width: 100%; height: auto; }
.ivar-qc-widget__lab-info { display: grid; grid-template-columns: minmax(80px, max-content) minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 14px; }
.ivar-qc-widget__lab-info dt { color: var(--qcw-muted); }
.ivar-qc-widget__lab-info dd { margin: 0; color: var(--qcw-ink); overflow-wrap: anywhere; }
.ivar-qc-widget__lab-info a { color: var(--qcw-accent); font-weight: 600; }
.ivar-qc-widget__lab-verify { display: grid; gap: 4px; border-radius: var(--qcw-radius); background: var(--qcw-surface-alt); padding: 12px 14px; font-size: 13.5px; color: var(--qcw-text); }
.ivar-qc-widget__lab-verify strong { color: var(--qcw-ink); }
.ivar-qc-widget__lab-foot { margin: 0; color: var(--qcw-muted); font-size: 12px; }

/* Popup chọn file kết quả gốc */
button.ivar-qc-widget__file { cursor: pointer; background: transparent; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; }
.ivar-qc-widget__files-hint { margin: 0; color: var(--qcw-muted); font-size: 13px; }
.ivar-qc-widget__file-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ivar-qc-widget__file-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--qcw-border); border-radius: var(--qcw-radius); padding: 12px 14px; color: var(--qcw-ink); text-decoration: none; }
.ivar-qc-widget__file-item:hover { border-color: var(--qcw-accent); color: var(--qcw-accent); }
.ivar-qc-widget__file-kind { border-radius: var(--qcw-radius); background: var(--qcw-accent-soft); color: var(--qcw-accent); font-size: 11.5px; font-weight: 700; padding: 3px 9px; white-space: nowrap; }
.ivar-qc-widget__file-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }

@media (max-width: 640px) {
    .ivar-qc-widget__lab-info { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .ivar-qc-widget__lab-info dd { margin-bottom: 8px; }
    .ivar-qc-widget__head { padding: 16px 16px 0; }
    .ivar-qc-widget__body { padding: 8px 16px 16px; }
    .ivar-qc-widget__intro h3 { font-size: 19px; }
    /* Nhãn trạng thái dài ("Khớp thông tin bao bì") xuống dòng dưới tên nhóm. */
    .ivar-qc-widget__group { grid-template-columns: auto minmax(0, 1fr); padding: 12px; }
    .ivar-qc-widget__status { grid-column: 2; justify-self: start; white-space: normal; text-align: left; }
    .ivar-qc-widget__file { width: 100%; justify-content: center; }
}