/* ==========================================================================
   GLS Equity - Compare page (Session 4h)
   Page layout only; cards, tables, forms and buttons come from styles.css.
   ========================================================================== */
.cmp-card { padding: 0; }
.cmp-toolbar { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px 24px; padding: 16px 20px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; border-radius: 12px 12px 0 0; }
.cmp-title { margin: 0 0 2px; font-size: 1.4rem; }
.cmp-add { display: flex; gap: 6px; align-items: center; }
.cmp-add .search-suggest-wrap { width: 320px; max-width: 100%; }
ul.search-dropdown.cmp-suggest { left: 0; transform: none; width: 420px; }
.cmp-legend { padding: 10px 20px; border-bottom: 1px solid #f1f5f9; }
.cmp-best-swatch { background: #d1fae5; color: #047857; padding: 0 6px; border-radius: 4px; font-weight: 700; }
.cmp-worst-swatch { background: #fee2e2; color: #b91c1c; padding: 0 6px; border-radius: 4px; font-weight: 700; }
#cmp-msg { margin: 12px 20px 0; }

/* Table: label column sticky on the left, symbol headers sticky on top */
.cmp-table-box { max-height: calc(100vh - 230px); border: none; border-radius: 0 0 12px 12px; }
.cmp-table th, .cmp-table td { font-size: 0.85rem; }
.cmp-table th { cursor: default; }
.cmp-table th::after { display: none; }
.cmp-th-label { min-width: 190px; }
.cmp-th-sym { min-width: 150px; text-align: right; text-transform: none; vertical-align: top; }
.cmp-th-inner { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.cmp-sym { font-size: 1rem; font-weight: 800; }
.cmp-remove { border: none; background: none; color: #94a3b8; cursor: pointer; font-size: 13px; padding: 0 2px; line-height: 1; }
.cmp-remove:hover { color: #dc2626; }
.cmp-th-name { font-size: 11px; font-weight: 500; color: #64748b; text-transform: none; letter-spacing: 0; max-width: 170px; margin-left: auto; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.cmp-th-tools { display: flex; justify-content: flex-end; margin-top: 6px; }
/* Section rows fold their metrics away (click anywhere on the row) */
.cmp-section td { background: #f1f5f9 !important; color: #0f172a; font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 16px; cursor: pointer; user-select: none; }
.cmp-section:hover td { background: #e2e8f0 !important; }
.cmp-caret { display: inline-block; width: 12px; color: #64748b; }
.cmp-section-count { font-weight: 500; text-transform: none; letter-spacing: 0; color: #94a3b8; margin-left: 10px; }
.cmp-label { font-weight: 600; color: #334155; white-space: nowrap; }
.cmp-info { font-size: 0.85rem; padding: 0 2px; vertical-align: middle; }
.cmp-hint { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: #e2e8f0; color: #64748b; font-size: 10px; font-weight: 700; cursor: help; margin-left: 4px; vertical-align: middle; }
.cmp-vs { display: block; font-size: 11px; font-weight: 600; line-height: 1.1; }
.data-table td.cmp-best { background-color: #d1fae5 !important; color: #047857; font-weight: 700; }
.data-table td.cmp-worst { background-color: #fee2e2 !important; color: #b91c1c; }
.data-table tbody tr:hover td.cmp-best { background-color: #a7f3d0 !important; }
.data-table tbody tr:hover td.cmp-worst { background-color: #fecaca !important; }
.cmp-table td.empty-state { white-space: normal; text-align: center; }
.cmp-table td.empty-state a { color: #2563eb; text-decoration: underline; }

@media (max-width: 768px) {
    .cmp-toolbar { border-radius: 0; }
    .cmp-add { width: 100%; flex-wrap: wrap; }
    .cmp-add .search-suggest-wrap { width: 100%; }
    ul.search-dropdown.cmp-suggest { width: calc(100vw - 32px); }
    .cmp-table-box { max-height: 70vh; }
    .cmp-th-label { min-width: 130px; }
    .cmp-th-sym { min-width: 110px; }
}