/* ============================================================
   NDB Wealth – Last 5 Year Rates Widget  v1.1
   Dark Mode · Poppins · #B3252C Accent
   Includes: Year-End Return Cards + Historical Rate Widget
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ── Shared variables (set on outer wrap) ────────────────── */
.ndb-rates-wrap {
    --red:       #B3252C;
    --red-dark:  #8f1c22;
    --bg:        #0d0d0d;
    --surface:   #161616;
    --surface2:  #1e1e1e;
    --surface3:  #252525;
    --border:    #2d2d2d;
    --text:      #f0f0f0;
    --muted:     #7a7a7a;
    --green:     #2ecc71;
    --danger:    #e74c3c;
    --font:      'Poppins', sans-serif;
    font-family: var(--font);
    color:       var(--text);
    margin:      20px 0;
}

/* ══════════════════════════════════════════════════════════
   YEAR-END RETURN CARDS
   ══════════════════════════════════════════════════════════ */

.ndb-yr-cards {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   16px;
    margin-bottom:         20px;
}

.ndb-yr-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 12px;
    padding:       22px 20px 18px;
    position:      relative;
    overflow:      hidden;
    transition:    border-color .2s, box-shadow .2s;
}
.ndb-yr-card::before {
    content:       '';
    position:      absolute;
    inset:         0;
    border-radius: 12px;
    background:    linear-gradient(135deg, rgba(179,37,44,.04) 0%, transparent 60%);
    pointer-events: none;
}
.ndb-yr-card:hover {
    border-color: rgba(179,37,44,.35);
    box-shadow:   0 4px 24px rgba(0,0,0,.4);
}

.ndb-yr-card__label {
    font-size:      .72rem;
    font-weight:    500;
    color:          var(--muted);
    line-height:    1.45;
    margin-bottom:  10px;
    letter-spacing: .02em;
}
.ndb-yr-card__date {
    display:     block;
    font-weight: 600;
    color:       var(--text);
    font-size:   .78rem;
    margin-top:  2px;
}

.ndb-yr-card__pct {
    font-size:      2.1rem;
    font-weight:    700;
    color:          var(--red);
    line-height:    1;
    letter-spacing: -.02em;
    margin-bottom:  6px;
}

.ndb-yr-card__sub {
    font-size:  .62rem;
    color:      var(--muted);
    margin-top: 4px;
    letter-spacing: .02em;
}

.ndb-yr-card--empty .ndb-yr-card__pct {
    color: var(--muted);
    font-size: 1.6rem;
}

/* ══════════════════════════════════════════════════════════
   HISTORICAL RATE WIDGET
   ══════════════════════════════════════════════════════════ */

.ndb-rw {
    background:    var(--bg);
    border:        1px solid var(--border);
    border-radius: 12px;
    padding:       28px 28px 24px;
    box-shadow:    0 4px 32px rgba(0,0,0,.5);
    box-sizing:    border-box;
}

/* ── Header ─────────────────────────────────────────────── */
.ndb-rw-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             16px;
    margin-bottom:   24px;
    padding-bottom:  20px;
    border-bottom:   1px solid var(--border);
}

.ndb-rw-label {
    font-size:      .68rem;
    font-weight:    500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--red);
    margin-bottom:  4px;
}

.ndb-rw-fund-name {
    font-size:   1.1rem;
    font-weight: 600;
    color:       var(--text);
    line-height: 1.2;
}

.ndb-rw-latest        { text-align: right; flex-shrink: 0; }
.ndb-rw-latest-pct    {
    font-size:      2.4rem;
    font-weight:    700;
    color:          var(--red);
    line-height:    1;
    letter-spacing: -.02em;
}
.ndb-rw-latest-label  { font-size: .68rem; color: var(--muted); margin-top: 4px; }

/* ── Controls ───────────────────────────────────────────── */
.ndb-rw-controls {
    display:       flex;
    align-items:   flex-end;
    flex-wrap:     wrap;
    gap:           12px;
    margin-bottom: 20px;
}

.ndb-rw-date-group {
    display:        flex;
    flex-direction: column;
    gap:            5px;
}

.ndb-rw-date-label {
    font-size:      .62rem;
    font-weight:    500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--muted);
}

.ndb-rw-date {
    background:   var(--surface2);
    color:        var(--text);
    border:       1px solid var(--border);
    border-radius: 6px;
    padding:      8px 12px;
    font-family:  var(--font);
    font-size:    .82rem;
    outline:      none;
    transition:   border-color .18s;
    cursor:       pointer;
    min-width:    148px;
    color-scheme: dark;
}
.ndb-rw-date:focus { border-color: var(--red); }
.ndb-rw-date::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .45; cursor: pointer; }

.ndb-rw-sep    { color: var(--muted); font-size: 1rem; padding-bottom: 8px; }
.ndb-rw-hint   { font-size: .62rem; color: var(--muted); align-self: flex-end; padding-bottom: 10px; white-space: nowrap; }

.ndb-rw-btn {
    background:    var(--red);
    color:         #fff;
    border:        none;
    border-radius: 6px;
    padding:       9px 22px;
    font-family:   var(--font);
    font-size:     .82rem;
    font-weight:   600;
    letter-spacing: .04em;
    cursor:        pointer;
    transition:    background .18s, transform .1s;
    align-self:    flex-end;
    white-space:   nowrap;
}
.ndb-rw-btn:hover  { background: var(--red-dark); }
.ndb-rw-btn:active { transform: scale(.97); }

/* ── Error ──────────────────────────────────────────────── */
.ndb-rw-error {
    background:    rgba(179,37,44,.1);
    border:        1px solid rgba(179,37,44,.35);
    border-radius: 6px;
    padding:       10px 14px;
    color:         #e0737a;
    font-size:     .8rem;
    margin-bottom: 16px;
}

/* ── Loading ────────────────────────────────────────────── */
.ndb-rw-loading {
    display:     flex;
    align-items: center;
    gap:         12px;
    color:       var(--muted);
    font-size:   .8rem;
    padding:     24px 0;
}
.ndb-rw-spinner {
    width: 22px; height: 22px;
    border: 3px solid var(--border);
    border-top-color: var(--red);
    border-radius: 50%;
    animation: ndb-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes ndb-spin { to { transform: rotate(360deg); } }

/* ── Results ────────────────────────────────────────────── */
.ndb-rw-result-meta {
    font-size: .7rem; color: var(--muted);
    margin-bottom: 12px; letter-spacing: .03em;
}
.ndb-rw-result-meta strong { color: var(--red); }

/* ── Chart ──────────────────────────────────────────────── */
.ndb-rw-chart-wrap {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 8px;
    padding:       16px;
    margin-bottom: 20px;
    height:        220px;
    position:      relative;
}
.ndb-rw-chart { width: 100% !important; height: 100% !important; }

/* ── Table ──────────────────────────────────────────────── */
.ndb-rw-table-wrap  { overflow-x: auto; }
.ndb-rw-table       { width: 100%; border-collapse: collapse; font-size: .82rem; }
.ndb-rw-table thead tr { background: var(--surface2); }

.ndb-rw-table th {
    padding: 10px 14px; text-align: left;
    font-weight: 600; font-size: .68rem;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.ndb-rw-table th:last-child,
.ndb-rw-table th:nth-child(2) { text-align: right; }

.ndb-rw-table td {
    padding: 9px 14px; border-bottom: 1px solid var(--border);
    color: var(--text); white-space: nowrap;
}
.ndb-rw-table td:nth-child(2) { text-align: right; font-weight: 500; color: var(--red); font-feature-settings: 'tnum'; }
.ndb-rw-table td:last-child   { text-align: right; font-size: .75rem; }

.ndb-rw-table tbody tr:hover { background: var(--surface3); }
.ndb-rw-table tbody tr:last-child td { border-bottom: none; }

.ndb-rw-table tr.ndb-latest-row td { background: rgba(179,37,44,.07); }
.ndb-rw-table tr.ndb-latest-row td:first-child::after {
    content: ' · latest'; font-size: .62rem; color: var(--red); font-weight: 500;
}

.ndb-change-up   { color: #2ecc71 !important; }
.ndb-change-down { color: #e74c3c !important; }
.ndb-change-flat { color: var(--muted) !important; }

.ndb-rw-no-data {
    text-align: center; padding: 32px 0;
    color: var(--muted); font-size: .85rem;
}
.ndb-rw-no-data strong { display: block; font-size: 2rem; margin-bottom: 8px; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* Tablet: 2-col cards */
@media (max-width: 860px) {
    .ndb-yr-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile */
@media (max-width: 560px) {
    .ndb-yr-cards { grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
    .ndb-yr-card  { padding: 16px; }
    .ndb-yr-card__pct { font-size: 1.8rem; }

    .ndb-rw { padding: 18px 16px; }
    .ndb-rw-header  { flex-direction: column; }
    .ndb-rw-latest  { text-align: left; }
    .ndb-rw-latest-pct { font-size: 2rem; }
    .ndb-rw-controls { flex-direction: column; align-items: stretch; }
    .ndb-rw-sep  { display: none; }
    .ndb-rw-btn  { width: 100%; text-align: center; padding: 12px; }
    .ndb-rw-date { width: 100%; }
    .ndb-rw-chart-wrap { height: 180px; }
}