/* ETF Analysis → Compare tab (static/js/etf-compare.js). A port of the
   ReN-frontend ETF Compare tab (DATAX-1048): EtfCompare, EtfCompareBox,
   EtfSearchComponent, EtfSectionNav and EtfCompareTable. Every value is the
   Tailwind class the source uses, resolved through ReN-frontend's
   tailwind.config.js and globals.css tokens (light and .dark). Cards, icon
   tiles, titles and the Explain / Download buttons come from ren-theme.css,
   which the root opts into with class "ren-theme". */

.ecmp,
.ecmp-overlay {
  /* ReN-frontend tokens this tab uses that ren-theme.css doesn't carry */
  --ecmp-primary-100: #4369f41a;
  --ecmp-primary-200: #bfdbfe;
  --ecmp-primary-300: #93c5fd;
  --ecmp-primary-400: #60a5fa;
  --ecmp-primary-500: #3b82f6;
  --ecmp-primary-600: #2563eb;
  --ecmp-primary-800: #4369f4;
  --ecmp-neutral-100: #f3f3f8;
  --ecmp-neutral-200: #e7e9f3;
  --ecmp-neutral-300: #dfe2ef;
  --ecmp-neutral-400: #ced0de;
  --ecmp-neutral-500: #bbbbcb;
  --ecmp-neutral-600: #9999ab;
  --ecmp-neutral-700: #676780;
  --ecmp-neutral-900: #343456;
  --ecmp-neutral-1000: #01012c;
  --ecmp-grey-100: #f1f4f6;
  --ecmp-grey-200: #e9e9e9;
  --ecmp-grey-300: #d0d5db;
  --ecmp-grey-400: #b1b7c2;
  --ecmp-grey-500: #7e8593;
  --ecmp-grey-800: #292a2f;
  --ecmp-gray-500: #6b7280;
  --ecmp-gray-600: #4b5563;
  --ecmp-divider: #e5e7eb;
  --ecmp-track: #e7e9f3;
  --ecmp-white: #ffffff;
  --ecmp-input-border: var(--ecmp-neutral-300);
  --ecmp-skeleton: var(--ecmp-grey-300);
  --ecmp-empty-label: var(--ecmp-gray-500);
  --ecmp-nav-active-text: #ffffff;
  --ecmp-result-hover: var(--ecmp-primary-100);
  --ecmp-tip-text: #ffffff;
  --ecmp-close-fill: var(--ecmp-neutral-900);
}
html[data-theme="dark"] .ecmp,
html[data-theme="dark"] .ecmp-overlay {
  --ecmp-primary-100: #4369f4;
  --ecmp-primary-200: #60a5fa;
  --ecmp-primary-300: #2563eb;
  --ecmp-primary-400: #1d4ed8;
  --ecmp-primary-500: #323ab6;
  --ecmp-primary-600: #1d4ed8;
  --ecmp-primary-800: #1d4ed8;
  --ecmp-neutral-100: #252525;
  --ecmp-neutral-200: #000000;
  --ecmp-neutral-300: #000000;
  --ecmp-neutral-400: #676780;
  --ecmp-neutral-500: #9999ab;
  --ecmp-neutral-600: #bbbbcb;
  --ecmp-neutral-700: #ced0de;
  --ecmp-neutral-900: #e7e9f3;
  --ecmp-neutral-1000: #01012c;
  --ecmp-grey-100: #353535;
  --ecmp-grey-200: #5b646a;
  --ecmp-grey-300: #40434b;
  --ecmp-grey-400: #b1b7c2;
  --ecmp-grey-500: #d0d5db;
  --ecmp-grey-800: #f9fafc;
  --ecmp-gray-500: #a1a1a6;
  --ecmp-gray-600: #c7c7cc;
  --ecmp-divider: #b4b4b4;
  --ecmp-track: #3a3a3c;
  /* the app's dark card colour, as ren-theme.css uses for bg-white */
  --ecmp-white: #1e293b;
  --ecmp-input-border: #ffffff;
  --ecmp-skeleton: #3a3a3c; /* dark:bg-gray-300 */
  --ecmp-empty-label: #f5f5f5; /* dark:text-gray-900 */
  --ecmp-nav-active-text: #60a5fa; /* dark:text-primary-200 */
  --ecmp-result-hover: #1a1e59;
  --ecmp-tip-text: #101010;
  --ecmp-close-fill: #e7e9f3;
}

/* ── EtfCompare: flex flex-col gap-[10px] pb-[40px] pt-[10px] ─────────── */
.ecmp {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0 40px;
  font-size: 16px;
  line-height: 1.5;
}
.ecmp button { font-family: inherit; }
/* w-full text-center mb-2 text-lg font-semibold */
.ecmp-intro { width: 100%; text-align: center; margin-bottom: 8px; font-size: 18px; font-weight: 600; }

/* grid grid-cols-2 lg:grid-cols-5 gap-[15px] mb-[10px] */
.ecmp-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-bottom: 10px; }
@media (min-width: 976px) {
  .ecmp-boxes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ── EtfCompareBox ─────────────────────────────────────────────────────── */
/* empty: border border-primary-800 bg-primary-200 hover:bg-primary-300
   (dark: bg-primary-500 hover:bg-primary-400) rounded-lg p-4 h-20 */
.ecmp-add {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 80px; padding: 16px;
  border: 1px solid var(--ecmp-primary-800); border-radius: 8px; background: var(--ecmp-primary-200);
  cursor: pointer; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); font: inherit; color: inherit;
}
.ecmp-add:hover { background: var(--ecmp-primary-300); }
html[data-theme="dark"] .ecmp-add { background: var(--ecmp-primary-500); }
html[data-theme="dark"] .ecmp-add:hover { background: var(--ecmp-primary-400); }
.ecmp-add:focus-visible { outline: 2px solid var(--ecmp-primary-600); outline-offset: 2px; }
/* text-gray-500 dark:text-gray-900 font-medium flex items-center gap-2 h-full */
.ecmp-add-label { display: flex; align-items: center; gap: 8px; height: 100%; font-weight: 500; color: var(--ecmp-empty-label); }
.ecmp-add-plus { font-size: 20px; }

/* filled: border border-grey-400 rounded-lg p-4 flex items-center justify-between relative h-20 gap-2.
   The box is a size container so a narrow box (two to a row on a small screen,
   five on a laptop with the sidebar open) re-flows its text instead of letting
   the name run under the price; min-height rather than h-20 so the narrowest
   layout can take a third line. */
.ecmp-box {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: 80px; padding: 16px; border: 1px solid var(--ecmp-grey-400); border-radius: 8px;
  container-type: inline-size;
}
.ecmp-box-in { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.ecmp-box-id { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.ecmp-box-sym { font-weight: 700; }
.ecmp-box-name-wrap { display: block; min-width: 0; }
/* text-gray-600 text-xs line-clamp-2 */
.ecmp-box-name {
  font-size: 12px; color: var(--ecmp-gray-600); overflow-wrap: anywhere;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
/* flex flex-col items-end font-semibold flex-shrink-0 */
.ecmp-box-px { display: flex; flex-direction: column; align-items: flex-end; font-weight: 600; flex-shrink: 0; }
.ecmp-box-chg { font-size: 14px; font-weight: 500; white-space: nowrap; }
/* Narrow box: symbol and price on one line, name and change on the next. */
@container (max-width: 240px) {
  .ecmp-box-in {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "sym price" "name chg";
    column-gap: 8px; align-items: center; align-content: center;
  }
  .ecmp-box-id, .ecmp-box-px { display: contents; }
  .ecmp-box-sym { grid-area: sym; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ecmp-box-name-wrap { grid-area: name; }
  .ecmp-box-name { -webkit-line-clamp: 1; }
  .ecmp-box-price { grid-area: price; text-align: right; }
  .ecmp-box-chg { grid-area: chg; font-size: 12px; text-align: right; }
}
/* Narrowest: the change gets a line of its own under the price. */
@container (max-width: 170px) {
  .ecmp-box-in { grid-template-areas: "sym price" "chg chg" "name name"; }
}
.ecmp-up { color: green; }
.ecmp-down { color: red; }
/* absolute -top-3 -right-3 bg-grey-100 border border-grey-400 p-2 rounded-full hover:bg-grey-200 */
.ecmp-box-x {
  position: absolute; top: -12px; right: -12px; display: none; padding: 8px; line-height: 0;
  border: 1px solid var(--ecmp-grey-400); border-radius: 9999px; background: var(--ecmp-grey-100);
  cursor: pointer; transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.ecmp-box-x:hover { background: var(--ecmp-grey-200); }
.ecmp-box:hover .ecmp-box-x,
.ecmp-box:focus-within .ecmp-box-x { display: block; }
.ecmp-box-x svg path { fill: var(--ecmp-close-fill); }

/* ── Error state ───────────────────────────────────────────────────────── */
.ecmp-error { width: 100%; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.ecmp-error-title { font-size: 15px; font-weight: 600; }
.ecmp-error-sub { font-size: 14px; color: var(--ecmp-neutral-600); }

/* ── EtfSectionNav: sticky top-0 z-30 bg-white rounded-lg shadow px-3 py-2
   flex items-center gap-2 overflow-x-auto scrollbar-hide ──────────────── */
.ecmp-nav {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-radius: 8px; background: var(--ecmp-white); box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.ecmp-nav::-webkit-scrollbar { display: none; }
/* text-sm font-semibold whitespace-nowrap rounded-[6px] px-3 py-[6px] */
.ecmp-nav-btn {
  font-size: 14px; font-weight: 600; line-height: 1.5; white-space: nowrap; padding: 6px 12px;
  border: 0; border-radius: 6px; background: none; color: var(--ecmp-grey-500); cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.ecmp-nav-btn:hover { background: var(--ecmp-neutral-200); }
.ecmp-nav-btn.active,
.ecmp-nav-btn.active:hover { background: var(--ecmp-primary-800); color: var(--ecmp-nav-active-text); }
.ecmp-nav-btn:focus-visible { outline: 2px solid var(--ecmp-primary-600); outline-offset: 2px; }

/* ── withDownloadAndExplain: actions at absolute right-2 top-4 ────────── */
.ecmp-card { position: relative; }
.ecmp .ecmp-card .ren-actions { top: 16px; right: 8px; z-index: 10; }

/* ── EtfCompareTable ───────────────────────────────────────────────────── */
/* title row: flex gap-[10px] items-center mb-[20px]; icon box w-10 h-10 */
.ecmp .ecmp-head { margin-bottom: 20px; }
.ecmp .ecmp-head .ren-ico { width: 20px; height: 20px; }
/* InfoTooltip: lucide Info 16, text-neutral-400 hover:text-neutral-600 cursor-help */
.ecmp-info { display: inline-flex; color: var(--ecmp-neutral-400); cursor: help; transition: color 0.15s; }
.ecmp-info:hover { color: var(--ecmp-neutral-600); }
.ecmp-info svg { width: 16px; height: 16px; }
/* text-sm text-neutral-500 py-[20px] text-center */
.ecmp-empty { padding: 20px 0; font-size: 14px; color: var(--ecmp-neutral-500); text-align: center; }

/* Where a fund's figures came from when FMP has none (not in ReN-frontend) */
.ecmp-notes { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; font-size: 12px; color: var(--ecmp-neutral-600); }

/* relative overflow-x-auto; table text-sm table-auto border-separate border-spacing-0 w-full */
.ecmp-tscroll { position: relative; overflow-x: auto; }
.ecmp-table { width: 100%; table-layout: auto; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.5; }
.ecmp-table th {
  padding: 12px; text-align: left; white-space: nowrap; font-weight: 700; background: var(--ecmp-white);
  border-bottom: 1px solid var(--ecmp-divider); min-width: 150px;
}
/* sticky left-0 z-20 align-bottom min-w-[180px] */
.ecmp-table th.ecmp-lead { position: sticky; left: 0; z-index: 20; vertical-align: bottom; min-width: 180px; }
.ecmp-colname { font-weight: 400; font-size: 12px; color: var(--ecmp-neutral-600); }
.ecmp-table td { padding: 12px; text-align: left; vertical-align: middle; border-top: 1px solid var(--ecmp-divider); }
.ecmp-table tr.ecmp-even, .ecmp-table tr.ecmp-even td.ecmp-lead { background: var(--ecmp-neutral-100); }
.ecmp-table tr.ecmp-odd, .ecmp-table tr.ecmp-odd td.ecmp-lead { background: var(--ecmp-white); }
/* sticky left-0 z-10 whitespace-nowrap font-semibold text-neutral-700 */
.ecmp-table td.ecmp-lead { position: sticky; left: 0; z-index: 10; white-space: nowrap; font-weight: 600; color: var(--ecmp-neutral-700); }
.ecmp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* skeleton: h-4 bg-grey-300 dark:bg-gray-300 animate-pulse */
.ecmp-skel { height: 16px; background: var(--ecmp-skeleton); animation: ecmp-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.ecmp-skel-label { width: 50%; }
.ecmp-skel-cell { width: 66.666667%; }
@keyframes ecmp-pulse { 50% { opacity: 0.5; } }

/* cell contents */
.ecmp-dash { color: var(--ecmp-neutral-500); }
.ecmp-ret { font-weight: 600; }
.ecmp-hold { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 160px; }
.ecmp-hold-id { min-width: 0; }
.ecmp-strong { font-weight: 600; color: var(--ecmp-neutral-900); }
.ecmp-hold-name { font-size: 12px; color: var(--ecmp-neutral-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecmp-hold-wt { font-size: 14px; font-weight: 600; color: var(--ecmp-neutral-900); flex-shrink: 0; }
.ecmp-sector { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.ecmp-track { flex: 1 1 0%; height: 10px; border-radius: 4px; overflow: hidden; background: var(--ecmp-track); }
.ecmp-fill { height: 100%; border-radius: 4px; background: var(--ecmp-primary-800); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.ecmp-sector-wt { width: 52px; flex-shrink: 0; text-align: right; font-size: 14px; font-weight: 600; color: var(--ecmp-neutral-900); }

/* ── PortalTooltip: bg-grey-800 text-white p-4 rounded-lg shadow-lg, max-w 400 ── */
.ecmp-tip {
  position: absolute; z-index: 1200; width: fit-content; padding: 16px; border-radius: 8px;
  background: var(--ecmp-grey-800); color: var(--ecmp-tip-text); font-family: "Work Sans", sans-serif; font-size: 16px; line-height: 1.5;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); pointer-events: none;
}
.ecmp-tip[hidden] { display: none; }
.ecmp-tip-inner { max-width: 400px; text-align: center; }
.ecmp-tip-inner.ecmp-tip-left { text-align: left; }
.ecmp-tip-arrow { position: absolute; left: 50%; width: 12px; height: 12px; background: var(--ecmp-grey-800); transform: translateX(-50%) rotate(45deg); }
.ecmp-tip-arrow.ecmp-below { top: -4px; }
.ecmp-tip-arrow.ecmp-above { bottom: -4px; }

/* ── Add-ETF overlay: fixed bg-modalBg z-50 w-screen h-screen flex justify-center
   animate-fadeIn backdrop-blur-sm; panel w-11/12 lg:w-1/3 animate-bounceUp pt-[25vh] ── */
.ecmp-overlay {
  position: fixed; inset: 0; z-index: 1100; display: flex; justify-content: center;
  background: rgba(53, 53, 53, 0.8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: ecmp-fade 0.2s ease-in-out forwards; font-family: "Work Sans", sans-serif; font-size: 16px; line-height: 1.5;
  color: var(--ecmp-neutral-900);
}
.ecmp-overlay[hidden] { display: none; }
.ecmp-overlay-panel { width: 91.666667%; padding-top: 25vh; animation: ecmp-bounce-up 0.5s ease-in-out forwards; }
@media (min-width: 976px) { .ecmp-overlay-panel { width: 33.333333%; } }
@keyframes ecmp-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ecmp-bounce-up {
  0% { transform: translateY(100%); }
  50% { transform: translateY(-10px); }
  70% { transform: translateY(5px); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ecmp-overlay, .ecmp-overlay-panel, .ecmp-skel { animation: none; }
}

/* EtfSearchComponent / InputField */
.ecmp-search { position: relative; z-index: 50; width: 100%; }
/* relative w-full bg-white rounded-normal border border-neutral-300 dark:border-white flex items-center pl-3 */
.ecmp-input-box {
  position: relative; display: flex; align-items: center; width: 100%; padding-left: 12px;
  border: 1px solid var(--ecmp-input-border); border-radius: 10px; background: var(--ecmp-white);
}
.ecmp-input-box svg { width: 24px; height: 24px; flex: none; }
.ecmp-input-box svg path { fill: #000000; }
html[data-theme="dark"] .ecmp-input-box svg path { fill: var(--ecmp-neutral-900); }
/* w-full py-[12px] pl-[10px] pr-[20px] border-none rounded-normal text-neutral-1000 bg-white
   placeholder:text-neutral-500 dark:text-neutral-900 */
.ecmp-input {
  width: 100%; padding: 12px 20px 12px 10px; border: none; border-radius: 10px; outline: none;
  font: inherit; color: var(--ecmp-neutral-1000); background: var(--ecmp-white);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-theme="dark"] .ecmp-input { color: var(--ecmp-neutral-900); }
.ecmp-input::placeholder { color: var(--ecmp-neutral-500); opacity: 1; }

/* the dropdown: mt-2 absolute w-full shadow-2xl ... border border-primary-300 */
.ecmp-drop { position: absolute; width: 100%; margin-top: 8px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); border-radius: 10px; }
.ecmp-drop:empty { display: none; }
.ecmp-drop-box { padding: 8px; border: 1px solid var(--ecmp-primary-300); border-radius: 8px; background: var(--ecmp-white); }
.ecmp-drop-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.ecmp-drop-recent { display: flex; flex-direction: column; gap: 8px; max-height: 250px; overflow-y: auto; }
/* flex justify-start pl-4 pt-2 -mt-2 text-sm bg-white w-full sticky -top-2 text-primary-600 */
.ecmp-drop-label {
  position: sticky; top: -8px; z-index: 12; display: flex; justify-content: flex-start; width: 100%;
  margin-top: -8px; padding: 8px 0 0 16px; font-size: 14px; background: var(--ecmp-white); color: var(--ecmp-primary-600);
}
.ecmp-drop-none { display: flex; justify-content: center; }

/* ResultCard: border border-transparent flex items-center justify-between px-2 py-1.5 rounded-[8px]
   hover:bg-primary-100 dark:hover:bg-[#1a1e59] */
.ecmp-res {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 6px 8px;
  border: 1px solid transparent; border-radius: 8px; background: none; text-align: left; cursor: pointer;
  font: inherit; color: inherit; transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.ecmp-res:hover, .ecmp-res:focus-visible { background: var(--ecmp-result-hover); outline: none; }
.ecmp-res-main { display: flex; align-items: center; min-width: 0; }
.ecmp-res-logo { display: flex; align-items: center; justify-content: center; width: 32px; min-width: 32px; height: 32px; }
.ecmp-res-logo img { width: 32px; height: 32px; border-radius: 6px; object-fit: contain; }
.ecmp-res-text { display: flex; flex-direction: column; min-width: 0; margin-left: 10px; }
/* font-semibold text-sm text-neutral-900 truncate */
.ecmp-res-title { font-size: 14px; font-weight: 600; color: var(--ecmp-neutral-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* text-[11px] text-grey-500 flex items-center gap-1 truncate */
.ecmp-res-sub { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ecmp-grey-500); overflow: hidden; white-space: nowrap; }
.ecmp-res-dot { color: var(--ecmp-grey-400); }
.ecmp-res-flag { width: 1.1em; height: 1.1em; vertical-align: middle; }
.ecmp-hl { color: var(--ecmp-primary-800); }
/* loading ResultCard: flex items-center rounded-[10px] bg-white animate-pulse h-14 */
.ecmp-res-skel { display: flex; align-items: center; height: 56px; border-radius: 10px; background: var(--ecmp-white); animation: ecmp-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.ecmp-res-skel > div { width: 100%; margin-left: 16px; }
.ecmp-res-skel span { display: block; height: 12px; border-radius: 4px; background: var(--ecmp-grey-200); }
.ecmp-res-skel span + span { margin-top: 8px; }