.navperf-wrap{max-width:1100px;margin:0 auto;padding:16px}
.navperf-card{border:1px solid #eee;border-radius:14px;padding:14px}
.navperf-error{color:#b00020;font-size:13px;margin-top:8px;display:none}

.navperf-presets{
  display:flex; flex-wrap:wrap; gap:0;
  margin-bottom:12px;
  justify-content: center;
}
.navperf-presets button {
    background: var(--e-global-color-uicore_white);
    color: var(--e-global-color-uicore_body);
    border: 1px solid #dadada;
    border-radius: 0;
    padding: 12px 18px;
    cursor: pointer;
    font-weight: 500;
}
.navperf-presets button.is-active {
    color: #fff;
    border-color: var(--e-global-color-uicore_primary);
    background-color: var(--e-global-color-uicore_primary);
}
.navperf-presets button:first-child {
    border-radius: 100px 0 0 100px;
}
.navperf-presets button:last-child {
    border-radius: 0  100px 100px 0;    
}

.navperf-grid{
  display:flex; flex-wrap:wrap; gap:10px; align-items:end;
  margin-bottom:12px;
}

.navperf-field{display:flex;flex-direction:column;gap:6px;min-width:210px;flex:1}
.navperf-field label{font-size:12px;opacity:.75}
.navperf-field select, .navperf-field input {
    height: 50px;
    padding: 8px 18px;
    border: 1px solid #dadada;
    border-radius: 8px;
    width: 100%;
}

/* Full width fund dropdown(s) */
.navperf-fund-a, .navperf-fund-b{flex: 1 1 100%; min-width: 280px}

/* Compare toggle + button */
.navperf-compare-toggle{min-width:auto;flex:0 0 auto}
.navperf-btn{height:50px;padding:0 14px;border:0;border-radius:10px;cursor:pointer;flex:0 0 auto}

/* When compare ON => both funds in one row 50%/50% */
.navperf-wrap.is-compare .navperf-fund-a,
.navperf-wrap.is-compare .navperf-fund-b{
  flex: 1 1 calc(50% - 5px);
}

/* Toggle style */
.navperf-switch {
    opacity: 1 !important;
    display: flex;
    gap: 10px;
    align-items: center;
    user-select: none;
    cursor: pointer;
    height: 50px;
    padding: 0 15px;
    border: 1px solid #dadada;
    border-radius: 8px;
    background: #fff;
    transition:ease 0.2s;
}
.navperf-switch i {
    opacity: 0;
    margin-right: -26px;
    font-size: 18px;
    transition:ease 0.2s;
}
.navperf-switch:has(input:checked) {
    border-color: var(--e-global-color-uicore_primary);
    color: #fff;
    background: var(--e-global-color-uicore_primary);
    border-radius: 100px;
}

.navperf-switch:has(input:checked) i {
    opacity: 1;
    margin-right: 0;;
}
.navperf-switch input{display:none}

.navperf-note{font-size:12px;opacity:.75;margin-top:8px}
.navperf-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:13px}
.navperf-meta .item{background:#fafafa;border:1px solid #eee;border-radius:12px;padding:10px 12px}
.navperf-chart{height:320px}
.apexcharts-tooltip{padding:0!important;box-shadow:none!important;border:0!important}
.np-tip{font-size:11px;line-height:1.2;background:#fff;border:1px solid #e6e6e6;border-radius:6px;padding:6px 8px}
.np-tip-date{font-weight:600;margin-bottom:4px;font-size:11px}
.np-tip-row{display:flex;gap:8px;justify-content:space-between;white-space:nowrap}