/*
 * Styles for the /Compare page.
 * Section 1 below was moved as-is from the inline <style> block that used to sit at the bottom of
 * Views/Compare/Index.cshtml (picker + spec table). Section 2 is new for Task 8 (benchmark bars,
 * suitability tabs, insight cards, data-quality warnings). Dark mode reuses the codebase's existing
 * mechanism: the `data-bs-theme="dark"` attribute set on <html> by Views/Shared/_Layout.cshtml —
 * there is no new theming system here.
 */

:root {
    --comparison-blue-50: #eaf2ff;
    --comparison-blue-300: #9ec5fe;
    --comparison-blue-500: #6ea8fe;
    --comparison-blue-600: #3d8bfd;
    --comparison-blue-700: #1d4ed8;
    --comparison-blue-900: #0a58ca;
    --comparison-card-bg: #fff;
    --comparison-card-border: rgba(13, 110, 253, .14);
    --comparison-track-bg: rgba(13, 110, 253, .08);
}

[data-bs-theme="dark"] {
    --comparison-card-bg: #1e1e1e;
    --comparison-card-border: rgba(110, 168, 254, .28);
    --comparison-track-bg: rgba(110, 168, 254, .16);
}

/* ===================== 1. Picker + spec table (moved from Index.cshtml) ===================== */

.comparison-picker { border: 1px solid var(--comparison-card-border); }
.comparison-selection { background: rgba(13, 110, 253, .035); min-height: 88px; }
.comparison-candidate-card { height: 100%; border: 1px solid var(--bs-border-color); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.comparison-candidate-card:hover { border-color: #86b7fe; box-shadow: 0 .35rem 1rem rgba(13, 110, 253, .12); transform: translateY(-2px); }
.comparison-candidate-card.is-selected { border: 2px solid #0d6efd; background: rgba(13, 110, 253, .045); }
.comparison-candidate-image { width: 76px; height: 76px; flex: 0 0 76px; object-fit: contain; border-radius: .5rem; background: var(--bs-tertiary-bg); }
.comparison-selected-chip { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; padding: .35rem .55rem; color: var(--bs-primary-text-emphasis); background: var(--bs-primary-bg-subtle); border: 1px solid var(--bs-primary-border-subtle); border-radius: 999px; }
.comparison-selected-chip span { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Bảng thông số dùng chung khung .comparison-card (mục 2) thay vì viền/nền bảng Bootstrap mặc định,
   để đồng bộ với các khối benchmark/nhu cầu/nhận xét phía trên — bớt kẻ ô và mảng màu xanh/đỏ rối mắt. */
.comparison-table { min-width: 720px; border-color: var(--comparison-card-border); }
.comparison-table > :not(caption) > * > * { border-color: var(--comparison-card-border); background: transparent; }
.comparison-table thead th { border-bottom-width: 2px; font-weight: 700; }
.comparison-label { min-width: 170px; }
.comparison-product { min-width: 220px; }
.comparison-image { width: 100%; height: 120px; object-fit: contain; }
/* Chỉ tô đậm ô tốt nhất bằng chữ + huy hiệu nhỏ (giống comparison-best-badge ở khối benchmark),
   không tô nền cả ô — không còn cột "tệ nhất" bị bôi đỏ gây rối mắt trên mọi hàng. */
.comparison-best { color: var(--comparison-blue-700); font-weight: 600; }
[data-bs-theme="dark"] .comparison-best { color: var(--comparison-blue-300); }

@media (max-width: 575.98px) {
    .comparison-candidate-image { width: 64px; height: 64px; flex-basis: 64px; }
}

/* ===================== 2. Task 8: benchmark / suitability / insight sections ===================== */

.comparison-card {
    background: var(--comparison-card-bg);
    border: 1px solid var(--comparison-card-border);
    border-radius: .75rem;
    padding: 1.25rem 1.5rem;
    animation: comparison-fade-in .35s ease both;
}

.comparison-product-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.comparison-product-header-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.comparison-product-header-image {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: .4rem;
    background: var(--comparison-track-bg);
    flex: 0 0 auto;
}

.comparison-product-header-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.comparison-data-quality-warning { border-radius: .5rem; }

.comparison-benchmark-metric-label {
    display: block;
    font-weight: 600;
    margin-bottom: .5rem;
}

.comparison-bar-row {
    display: grid;
    grid-template-columns: minmax(120px, 200px) 1fr auto;
    align-items: center;
    gap: .5rem .75rem;
    padding: .35rem 0;
}

.comparison-bar-row.comparison-bar-missing {
    grid-template-columns: minmax(120px, 200px) 1fr;
}

.comparison-bar-name {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.comparison-bar-track {
    position: relative;
    height: 14px;
    background: var(--comparison-track-bg);
    border-radius: 999px;
    overflow: hidden;
}

.comparison-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--comparison-blue-600), var(--comparison-blue-700));
    transition: width .5s ease;
}

.comparison-bar-fill-suitability {
    background: linear-gradient(90deg, var(--comparison-blue-500), var(--comparison-blue-900));
}

.comparison-bar-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.comparison-bar-row.is-best .comparison-bar-value {
    color: var(--comparison-blue-900);
}

[data-bs-theme="dark"] .comparison-bar-row.is-best .comparison-bar-value {
    color: var(--comparison-blue-300);
}

.comparison-best-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .5rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--comparison-blue-700);
}

[data-bs-theme="dark"] .comparison-best-badge {
    color: var(--comparison-blue-300);
}

.comparison-bar-meta {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: .8rem;
}

.comparison-power-badge {
    background: var(--comparison-track-bg);
    color: var(--comparison-blue-900);
    font-weight: 500;
}

[data-bs-theme="dark"] .comparison-power-badge {
    color: var(--comparison-blue-300);
}

/* Nhãn "Ước tính AI": nền vàng nhạt + chữ tối (tương phản >= 4.5:1), tách khỏi badge chế độ nguồn điện. */
.comparison-estimate-badge {
    background: #fff3cd;
    color: #664d03;
    font-weight: 600;
}

[data-bs-theme="dark"] .comparison-estimate-badge {
    background: #3d3000;
    color: #ffda6a;
}

.comparison-bar-track-empty {
    color: var(--bs-secondary-color, #6c757d);
    font-style: italic;
    font-size: .9rem;
}

.comparison-contributions { color: var(--bs-secondary-color, #6c757d); }
.comparison-contributions summary { cursor: pointer; }
.comparison-contributions summary:focus-visible { outline: .15rem solid var(--comparison-blue-700); outline-offset: .15rem; }

.comparison-segment-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.comparison-segment-tab {
    border: 1px solid var(--comparison-card-border);
    background: transparent;
    color: var(--comparison-blue-900);
    padding: .4rem 1rem;
    border-radius: 999px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

[data-bs-theme="dark"] .comparison-segment-tab {
    color: var(--comparison-blue-300);
}

.comparison-segment-tab.is-active {
    background: var(--comparison-blue-700);
    border-color: var(--comparison-blue-700);
    color: #fff;
}

.comparison-segment-tab:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .3);
}

.comparison-segment-panel[hidden] { display: none; }

.comparison-segment-explanations {
    list-style: none;
    padding: 0;
    margin: .75rem 0 0;
    display: grid;
    gap: .35rem;
}

.comparison-insight-card {
    background: var(--comparison-card-bg);
    border: 1px solid var(--comparison-card-border);
    border-radius: .65rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.comparison-insight-card:last-child { margin-bottom: 0; }

.comparison-insight-heading {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.comparison-insight-list { padding-left: 1.1rem; margin-bottom: 0; }
.comparison-insight-list li { overflow-wrap: anywhere; }

.comparison-badge-ai {
    background: rgba(13, 110, 253, .12);
    color: var(--comparison-blue-900);
    border: 1px solid var(--comparison-blue-300);
    font-weight: 600;
}

[data-bs-theme="dark"] .comparison-badge-ai {
    color: var(--comparison-blue-300);
}

.comparison-badge-fallback {
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-secondary-color, #495057);
    border: 1px solid var(--bs-border-color, #dee2e6);
    font-weight: 600;
}

@keyframes comparison-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 575.98px) {
    .comparison-bar-row,
    .comparison-bar-row.comparison-bar-missing {
        grid-template-columns: 1fr;
        row-gap: .35rem;
    }

    .comparison-bar-value { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
    .comparison-card,
    .comparison-bar-fill {
        animation: none !important;
        transition: none !important;
    }
}

/* Aurora: màu nhấn theo token của site. */
.comparison-candidate-card.is-selected { border-color: var(--lt-ocean, #1d4ed8); background: var(--lt-ocean-50, rgba(29, 78, 216, .05)); }

/* Khối "Hợp với bạn" (hồ sơ nhu cầu). */
.comparison-fit-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.comparison-fit-list li { display: flex; align-items: center; gap: .75rem; }