/* ===== FinanceTracker Design System ===== */

/* ─── Dark mode tokens (default) ─── */
:root, [data-theme="dark"] {
  --surface-raised: #1F1F23;
  --gain:           #3DD68C;
  --loss:           #F76B6B;
  --r-card:         16px;
  --r-pill:         999px;
  --text-3:         #62626B;

  /* Fixed height for the Market Pulse / Money Minute / Your Money News cards, so the three stay
     equal-height with each other (they're each in their own MudGrid column). The "At a Glance"
     KPI cards no longer share this — they're back to natural, content-driven height. */
  --bl-market-widget-height: 300px;

  --ft-bg:       #0A0A0C;
  --ft-surface:  #161619;
  --ft-surface2: #1F1F23;
  --ft-surface3: #1A1D22;
  --ft-border:   rgba(255,255,255,0.07);
  --ft-text:     #F4F4F6;
  --ft-muted:    #8C8C94;

  /* category colours */
  --ft-housing:   #4d9de0;
  --ft-food:      #3bb89a;
  --ft-debt:      #F76B6B;
  --ft-transport: #E3B341;
  --ft-utilities: #8a9bb0;
  --ft-savings:   #3DD68C;
}

/* ─── Light mode overrides ─── */
[data-theme="light"] {
  --surface-raised: #EDEDF0;
  --ft-bg:       #F5F5F7;
  --ft-surface:  #FFFFFF;
  --ft-surface2: #EDEDF0;
  --ft-surface3: #E8E8EE;
  --ft-border:   rgba(0,0,0,0.08);
  --ft-text:     #1A1A2E;
  --ft-muted:    #6B6B78;
  --text-3:      #8B8B99;
}

html, body {
  font-family:      'Inter', system-ui, sans-serif !important;
  background-color: var(--ft-bg) !important;
}

/* ---- Legacy font helpers ---- */
.ft-mono { font-family: 'Inter', monospace !important; font-feature-settings: "tnum" 1; }
.ft-syne { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 700 !important; }

/* ---- Tabular figures on all MudBlazor typography ---- */
.mud-typography, .num { font-feature-settings: "tnum" 1; }

/* ---- Flat card ---- */
.fin-card.mud-paper {
  background:    var(--mud-palette-surface);
  border:        1px solid var(--mud-palette-divider);
  border-radius: var(--r-card);
  box-shadow:    none !important;
}

.fin-card.mud-paper:not(.mud-card) { padding: 24px; }
.fin-card.mud-card .mud-card-content { padding: 24px; }

/* ---- Gain / loss ---- */
.num-gain { color: var(--gain) !important; }
.num-loss { color: var(--loss) !important; }

/* ---- Holdings table ---- */
.holdings .mud-table-root { background: transparent; }
.holdings .mud-table-head .mud-table-cell {
  color:       var(--mud-palette-text-secondary);
  font-size:   .8125rem;
  font-weight: 500;
}
.holdings .mud-table-row:hover { background: rgba(255,255,255,.04); }

/* ---- Goal progress bar ---- */
.goal-bar.mud-progress-linear {
  height:        12px;
  border-radius: var(--r-pill);
  background:    rgba(157,141,241,.16);
}
.goal-bar .mud-progress-linear-bar {
  background:    linear-gradient(90deg, #8E7DF0, #B0A4F7);
  border-radius: var(--r-pill);
}

/* ---- Segmented range toggle ---- */
.range-toggle.mud-toggle-group {
  background:    var(--surface-raised);
  border:        1px solid var(--mud-palette-divider);
  border-radius: var(--r-pill);
  padding:       4px;
  gap:           4px;
}
.range-toggle .mud-toggle-item { border: 0; border-radius: var(--r-pill); }
.range-toggle .mud-toggle-item-selected {
  background: rgba(61,214,140,.14);
  color:      var(--gain);
}

/* ---- Ticker avatar ---- */
.tkn { width: 32px; height: 32px; font-weight: 600; font-size: .75rem; }

/* ---- Label / KPI helpers ---- */
.ft-label {
  font-family:    'Inter', sans-serif;
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--ft-muted);
  line-height:    1.4;
}

.ft-kpi-val {
  font-family:           'Inter', sans-serif;
  font-size:             1.85rem;
  font-weight:           500;
  line-height:           1.15;
  margin:                6px 0 4px;
  letter-spacing:        -0.01em;
  font-feature-settings: "tnum" 1;
}

/* Larger variant for hero KPIs */
.ft-kpi-val-lg {
  font-family:           'Inter', sans-serif;
  font-size:             2.2rem;
  font-weight:           600;
  line-height:           1.1;
  margin:                8px 0 6px;
  letter-spacing:        -0.02em;
  font-feature-settings: "tnum" 1;
}

.ft-pos { color: var(--gain) !important; font-feature-settings: "tnum" 1; }

/* ---- Content wrapper ---- */
.ft-content-wrap {
  padding:    24px 28px;
  width:      100%;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .ft-content-wrap { padding: 16px; }
}

/* ---- Hero KPI Grid (3 critical metrics) ---- */
.ft-kpi-hero {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   16px;
}

@media (max-width: 900px) {
  .ft-kpi-hero { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .ft-kpi-hero { grid-template-columns: 1fr; }
}

/* ---- Standard KPI Grid (4-col secondary metrics) ---- */
.ft-kpi-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   16px;
}

@media (max-width: 1100px) {
  .ft-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .ft-kpi-grid { grid-template-columns: 1fr; }
}

/* ---- KPI Card ---- */
.ft-kpi-card {
  --accent:       var(--ft-border);
  background:     var(--mud-palette-surface);
  border:         1px solid var(--mud-palette-divider);
  border-left:    3px solid var(--accent);
  border-radius:  var(--r-card);
  padding:        20px;
  display:        flex;
  flex-direction: column;
  min-width:      0;
}

.ft-kpi-card--income { --accent: var(--mud-palette-primary); }

.ft-kpi-card-top {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   8px;
}

.ft-kpi-icon-wrap {
  width:            28px;
  height:           28px;
  border-radius:    8px;
  background:       rgba(157,141,241,0.1);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
}

.ft-kpi-bar-track {
  height:        3px;
  background:    var(--ft-border);
  border-radius: 2px;
  overflow:      hidden;
  margin-top:    14px;
}

.ft-kpi-bar-fill {
  height:        100%;
  border-radius: 2px;
  transition:    width 0.5s ease;
  min-width:     3px;
}

.ft-kpi-card-foot {
  display:     flex;
  justify-content: space-between;
  align-items: center;
  margin-top:  6px;
  gap:         8px;
  flex-wrap:   wrap;
}

.ft-kpi-ratio {
  opacity:     1 !important;
  font-weight: 700;
  white-space: nowrap;
}

.ft-kpi-secondary {
  display:     flex;
  align-items: baseline;
  gap:         2px;
  margin-top:  6px;
  font-family:           'Inter', sans-serif;
  font-size:             1rem;
  font-weight:           500;
  font-feature-settings: "tnum" 1;
  color:                 var(--ft-muted);
}

/* ---- Payments / Upcoming side-by-side ---- */
.ft-payments-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
  align-items:           start;
}

@media (max-width: 900px) {
  .ft-payments-grid { grid-template-columns: 1fr; }
}

/* ---- Charts Grid ---- */
.ft-charts-grid {
  display:               grid;
  grid-template-columns: 2fr 3fr;
  gap:                   16px;
  align-items:           start;
}

@media (max-width: 900px) {
  .ft-charts-grid { grid-template-columns: 1fr; }
}

/* ---- Dashboard header: 3-column row ---- */
.ft-dash-header {
  display:     flex;
  align-items: center;
  gap:         16px;
  flex-wrap:   wrap;
}

.ft-dash-header > :first-child { flex: 1; min-width: 180px; }

.ft-dash-alert {
  display:       flex;
  align-items:   flex-start;
  gap:           8px;
  background:    rgba(247,107,107,0.08);
  border:        1px solid rgba(247,107,107,0.3);
  border-radius: var(--r-card);
  padding:       10px 14px;
  min-width:     200px;
  max-width:     320px;
}

@media (max-width: 640px) {
  .ft-dash-header { flex-direction: column; align-items: stretch; }
  .ft-dash-alert  { max-width: none; }
}

/* ---- Savings Coach Card ---- */
.ft-coach-card {
  background:    rgba(227,179,65,0.08);
  border:        1px solid rgba(227,179,65,0.35);
  border-radius: var(--r-card);
  padding:       16px 20px;
}

/* ---- Milestone Celebration Card ---- */
.ft-milestone-card {
  background:    rgba(61,214,140,0.08);
  border:        1px solid rgba(61,214,140,0.35);
  border-radius: var(--r-card);
  padding:       16px 20px;
}

/* ---- Upcoming Payments List ---- */
.ft-upcoming-list {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.ft-upcoming-row {
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       10px 0;
  min-height:    44px;
  border-bottom: 1px solid var(--ft-border);
}

.ft-upcoming-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* ---- Breakdown Table ---- */
.ft-breakdown-wrap { overflow-x: auto; }

@media (max-width: 600px) {
  .ft-breakdown-hint {
    display:     block;
    font-size:   12px;
    color:       var(--ft-muted);
    text-align:  center;
    padding:     0 0 8px;
  }
}

.ft-breakdown {
  width:           100%;
  border-collapse: collapse;
  font-size:       13px;
  font-family:     'Inter', sans-serif;
}

.ft-breakdown thead th {
  font-size:      12px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--ft-muted);
  padding:        8px 10px;
  text-align:     left;
  border-bottom:  1px solid var(--ft-border);
  white-space:    nowrap;
}

.ft-breakdown thead th.ta-r { text-align: right; }

.ft-breakdown tbody td {
  padding:        7px 10px;
  border-bottom:  1px solid rgba(0,0,0,0.04);
  white-space:    nowrap;
  vertical-align: middle;
  color:          var(--ft-text);
}

[data-theme="dark"] .ft-breakdown tbody td {
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.ft-breakdown tbody td.ta-r {
  text-align:            right;
  font-feature-settings: "tnum" 1;
}

.ft-breakdown .ft-group-row td {
  padding:          10px 10px 5px;
  background-color: var(--ft-surface3);
  border-bottom:    none;
  border-top:       1px solid var(--ft-border);
}

.ft-breakdown tfoot td {
  padding:          10px;
  background-color: var(--ft-surface3);
  border-top:       1px solid var(--ft-border);
  white-space:      nowrap;
}

.ft-breakdown tfoot td.ta-r {
  text-align:            right;
  font-feature-settings: "tnum" 1;
}

.ft-wk4-col { background-color: rgba(61,214,140,0.06); }

/* ---- Weekly Tracker Table ---- */
.ft-tracker-wrap { overflow-x: auto; }

.ft-tracker {
  width:           100%;
  border-collapse: collapse;
  font-size:       13px;
  font-family:     'Inter', sans-serif;
}

.ft-tracker thead th {
  font-size:      12px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--ft-muted);
  padding:        8px 12px;
  border-bottom:  1px solid var(--ft-border);
  white-space:    nowrap;
}

.ft-tracker tbody td {
  padding:        8px 12px;
  border-bottom:  1px solid rgba(0,0,0,0.04);
  vertical-align: middle;
  color:          var(--ft-text);
}

[data-theme="dark"] .ft-tracker tbody td {
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.ft-tracker .ft-today-row  { background-color: rgba(88,166,255,0.08); }
.ft-tracker .ft-funded-row { background-color: rgba(61,214,140,0.07); }

/* ---- Badges ---- */
.ft-badge {
  display:       inline-block;
  padding:       2px 9px;
  border-radius: 20px;
  font-size:     12px;
  font-family:   'Inter', sans-serif;
  font-weight:   500;
  white-space:   nowrap;
  line-height:   1.6;
}

.ft-badge-funded {
  background-color: rgba(61,214,140,0.15);
  color:            var(--gain);
  border:           1px solid rgba(61,214,140,0.3);
}

.ft-badge-today {
  background-color: rgba(88,166,255,0.2);
  color:            #58A6FF;
  border:           1px solid rgba(88,166,255,0.35);
  margin-left:      6px;
}

.ft-badge-pending {
  background-color: rgba(140,140,148,0.12);
  color:            var(--ft-muted);
  border:           1px solid rgba(140,140,148,0.25);
}

/* ---- Account Grid ---- */
.ft-account-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   16px;
}

/* ---- Account Type Badge ---- */
.ft-acct-badge {
  display:        inline-block;
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding:        2px 7px;
  border-radius:  10px;
}

/* ---- Category Pill ---- */
.ft-cat-pill {
  display:       inline-block;
  font-size:     12px;
  font-weight:   600;
  padding:       2px 8px;
  border-radius: 10px;
  white-space:   nowrap;
}

/* ---- Budget Grid ---- */
.ft-budget-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:                   16px;
}

/* ======================================================
   BELDLEDGER AI — Premium Dashboard Design System
   ====================================================== */

/* ─── App Bar ─── */
.bl-appbar.mud-appbar {
  background:    var(--ft-surface) !important;
  border-bottom: 1px solid var(--ft-border) !important;
  height:        60px !important;
}

.bl-brand-icon {
  width:            32px;
  height:           32px;
  border-radius:    8px;
  background:       rgba(157,141,241,0.15);
  display:          flex;
  align-items:      center;
  justify-content:  center;
}

.bl-appbar-actions {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.bl-search-pill {
  display:       flex;
  align-items:   center;
  gap:           8px;
  background:    var(--ft-surface2);
  border:        1px solid var(--ft-border);
  border-radius: 8px;
  padding:       7px 14px;
  cursor:        pointer;
  transition:    background 0.15s;
  min-width:     180px;
}

.bl-search-pill:hover { background: var(--ft-surface3); }

.bl-user-pill {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       6px 10px;
  border-radius: 8px;
  background:    var(--ft-surface2);
  border:        1px solid var(--ft-border);
  cursor:        pointer;
}

.bl-avatar {
  width:            28px;
  height:           28px;
  border-radius:    50%;
  background:       linear-gradient(135deg, #9D8DF1, #7B68EE);
  color:            #fff;
  font-size:        12px;
  font-weight:      700;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
}

/* ─── Navigation ─── */
.bl-nav-link.mud-nav-link {
  border-radius: 8px;
  margin:        1px 8px;
  font-size:     13px;
  font-weight:   500;
  transition:    background 0.15s, color 0.15s;
}

.bl-nav-link.mud-nav-link.active,
.bl-nav-link.mud-nav-link:hover {
  background: rgba(157,141,241,0.12) !important;
  color:      var(--mud-palette-primary) !important;
}

/* Section group headers (Menu, Insights, Account, Counselor, Admin) — collapsed by default so
   the rail/drawer isn't a wall of 19+ always-visible links; click to expand a section. */
.bl-nav-group.mud-nav-group > .mud-nav-link {
  border-radius:  8px;
  margin:         1px 8px;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--ft-muted);
  transition:     background 0.15s, color 0.15s;
}

.bl-nav-group.mud-nav-group > .mud-nav-link:hover,
.bl-nav-group.mud-nav-group > .mud-nav-link.mud-expanded {
  background: rgba(157,141,241,0.08);
  color:      var(--ft-text);
}

.bl-nav-group .mud-nav-link-expand-icon {
  color: var(--ft-muted);
}

/* ─── Page Header ─── */
.bl-page-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             12px;
  margin-bottom:   24px;
  padding-bottom:  20px;
  border-bottom:   1px solid var(--ft-border);
}

.bl-page-title {
  font-size:      1.5rem !important;
  font-weight:    700 !important;
  letter-spacing: -0.02em !important;
  color:          var(--ft-text) !important;
}

.bl-page-subtitle {
  font-size:   13px !important;
  color:       var(--ft-muted) !important;
  margin-top:  2px !important;
}

.bl-date-chip {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       6px 12px;
  background:    var(--ft-surface2);
  border:        1px solid var(--ft-border);
  border-radius: 8px;
}

/* ─── Shortfall / Critical Insight Strip ─── */
.bl-shortfall-strip {
  background:    rgba(217, 119, 6, 0.05);
  border:        1px solid rgba(217, 119, 6, 0.18);
  border-left:   3px solid #d97706;
  border-radius: 8px;
  overflow:      hidden;
}

.bl-shortfall-item {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  padding:         10px 14px;
  flex-wrap:       nowrap;
}

.bl-shortfall-item + .bl-shortfall-item {
  border-top: 1px solid rgba(217, 119, 6, 0.1);
}

.bl-shortfall-icon {
  color:      #d97706 !important;
  font-size:  18px !important;
  flex-shrink: 0;
  margin-top: 1px;
}

.bl-shortfall-content {
  flex:      1;
  min-width: 0;
  display:   flex;
  flex-wrap: wrap;
  gap:       0 8px;
  align-items: baseline;
}

.bl-shortfall-title {
  font-weight: 600;
  font-size:   13px;
  color:       var(--ft-text);
  white-space: nowrap;
}

.bl-shortfall-body {
  font-size:  12px;
  color:      var(--ft-muted);
}

.bl-shortfall-actions {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-shrink: 0;
}

.bl-shortfall-link {
  font-size:   12px !important;
  font-weight: 600 !important;
  color:       #d97706 !important;
  white-space: nowrap;
}

.bl-shortfall-dismiss {
  color:    var(--ft-muted) !important;
  padding:  2px !important;
  opacity:  0.6;
  transition: opacity 0.15s;
}

.bl-shortfall-dismiss:hover {
  opacity: 1;
}

/* ── Dashboard zone section dividers ── */
.bl-dash-zone {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-top:  8px;
}
.bl-dash-zone-label {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--ft-muted);
  white-space:    nowrap;
  flex-shrink:    0;
}
.bl-dash-zone-line {
  flex:       1;
  height:     1px;
  background: var(--ft-border);
  opacity:    0.5;
}

/* ─── Widget Card ─── */
.bl-widget-card.mud-paper {
  background:    var(--mud-palette-surface) !important;
  border:        1px solid var(--mud-palette-divider) !important;
  border-radius: 12px !important;
  box-shadow:    none !important;
  overflow:      hidden !important;
  transition:    border-color 0.2s, box-shadow 0.2s !important;
}

.bl-widget-card.mud-paper:hover {
  border-color: rgba(157,141,241,0.35) !important;
}

.bl-widget-card .mud-card-content { padding: 20px !important; }

/* ─── Widget Header ─── */
.bl-widget-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             12px;
  margin-bottom:   16px;
}

/* "View all →"-style links: the text alone is well under the WCAG 2.5.8 24x24px
   minimum target size. Pad the hit area without changing the visible text size,
   using a negative margin so surrounding layout doesn't shift. */
.bl-widget-header .mud-link {
  display:     inline-block;
  padding:     4px 6px;
  margin:      -4px -6px;
  min-height:  24px;
  box-sizing:  border-box;
}

.bl-widget-title {
  font-size:      14px;
  font-weight:    700;
  color:          var(--ft-text);
  letter-spacing: -0.01em;
}

.bl-widget-sub {
  font-size:  12px;
  color:      var(--ft-muted);
  margin-top: 2px;
}

/* ─── Live/demo data indicator dot ─── */
.bl-live-dot,
.bl-demo-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  flex-shrink:   0;
  display:       inline-block;
}
.bl-live-dot {
  background: var(--gain);
  animation:  bl-live-pulse 2s ease-out infinite;
}
.bl-demo-dot {
  background: var(--ft-muted);
  opacity:    0.6;
}
@keyframes bl-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(61,214,140,0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(61,214,140,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,214,140,0); }
}
@media (prefers-reduced-motion: reduce) {
  .bl-live-dot { animation: none; }
}

.bl-period-chip {
  font-size:      11px;
  font-weight:    600;
  padding:        3px 10px;
  border-radius:  20px;
  background:     rgba(157,141,241,0.12);
  color:          var(--mud-palette-primary);
  border:         1px solid rgba(157,141,241,0.3);
  white-space:    nowrap;
  flex-shrink:    0;
}

/* ─── Market Ticker ─── */
.bl-ticker-frame.mud-paper {
  position:      relative;
  overflow:      hidden;
  border-radius: 10px;
  background:    var(--mud-palette-surface) !important;
  border:        1px solid var(--mud-palette-divider) !important;
  box-shadow:    none !important;
}
.bl-ticker-frame::before,
.bl-ticker-frame::after {
  content:    "";
  position:   absolute;
  top:        0;
  bottom:     0;
  width:      36px;
  z-index:    2;
  pointer-events: none;
}
.bl-ticker-frame::before { left: 0;  background: linear-gradient(90deg,  var(--mud-palette-surface), transparent); }
.bl-ticker-frame::after  { right: 0; background: linear-gradient(270deg, var(--mud-palette-surface), transparent); }

.bl-ticker-track {
  display:     flex;
  align-items: center;
  gap:         10px;
  width:       max-content;
  padding:     8px 12px;
  animation:   bl-ticker-scroll 40s linear infinite;
}
.bl-ticker-frame:hover .bl-ticker-track { animation-play-state: paused; }
@keyframes bl-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .bl-ticker-track { animation: none; overflow-x: auto; }
}

/* ─── KPI Summary Card ─── */
.bl-kpi-card {
  background:     var(--mud-palette-surface);
  border:         1px solid var(--mud-palette-divider);
  border-radius:  12px;
  padding:        20px;
  height:         100%;
  display:        flex;
  flex-direction: column;
  min-width:      0;
  transition:     border-color 0.2s, transform 0.15s;
  cursor:         default;
}

.bl-kpi-card:hover {
  border-color: rgba(157,141,241,0.35);
  transform:    translateY(-1px);
}

.bl-kpi-top-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   12px;
}

.bl-kpi-icon-badge {
  width:            32px;
  height:           32px;
  border-radius:    8px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
}

.bl-kpi-amount {
  font-size:      1.8rem;
  font-weight:    700;
  letter-spacing: -0.03em;
  color:          var(--ft-text);
  line-height:    1.1;
  margin-bottom:  4px;
  font-feature-settings: "tnum" 1;
}

.bl-kpi-sub {
  font-size:  12px;
  color:      var(--ft-muted);
  margin-top: 4px;
}

.bl-trend-chip {
  display:       inline-block;
  font-size:     11px;
  font-weight:   600;
  padding:       2px 8px;
  border-radius: 20px;
  white-space:   nowrap;
}

.bl-trend-up {
  background: rgba(61,214,140,0.15);
  color:      var(--gain);
  border:     1px solid rgba(61,214,140,0.3);
}

.bl-trend-down {
  background: rgba(247,107,107,0.15);
  color:      var(--loss);
  border:     1px solid rgba(247,107,107,0.3);
}

.bl-sparkline-wrap {
  /* auto margin (not a fixed 12px) pushes the sparkline to the bottom of the card regardless of
     whether the trend chip above it is present — so every KPI card's sparkline lines up at the
     same height across the row instead of drifting based on which cards happen to have a trend
     this period (Earnings never does; the others depend on there being a prior period to compare). */
  margin-top: auto;
  padding-top: 12px;
  height:     36px;
  flex-shrink: 0;
}

/* ─── Spending Donut ─── */
.bl-spending-layout {
  display:     flex;
  align-items: center;
  gap:         16px;
  flex-wrap:   wrap;
}

.bl-donut-container {
  position:   relative;
  flex-shrink: 0;
}

.bl-donut-center {
  position:  absolute;
  top:       50%;
  left:      50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.bl-spending-legend {
  flex:           1;
  min-width:      140px;
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.bl-legend-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   12px;
}

.bl-legend-dot {
  width:        8px;
  height:       8px;
  border-radius: 2px;
  flex-shrink:  0;
}

.bl-legend-name {
  flex:          1;
  color:         var(--ft-text);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.bl-legend-amount {
  font-weight: 600;
  color:       var(--ft-text);
  flex-shrink: 0;
}

.bl-legend-pct {
  font-size:   11px;
  color:       var(--ft-muted);
  flex-shrink: 0;
  min-width:   32px;
  text-align:  right;
}

/* ─── AI Insights Widget ─── */
.bl-insight-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       10px;
  border-radius: 8px;
  cursor:        pointer;
  transition:    background 0.15s;
  border:        1px solid transparent;
}

.bl-insight-row:hover {
  background:    var(--ft-surface2);
  border-color:  var(--ft-border);
}

.bl-insight-icon {
  width:           32px;
  height:          32px;
  border-radius:   8px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

/* ─── Financial Performance Table ─── */
.bl-perf-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       13px;
  font-family:     'Inter', sans-serif;
}

.bl-perf-table thead th {
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--ft-muted);
  padding:        8px 12px;
  text-align:     left;
  border-bottom:  1px solid var(--ft-border);
  white-space:    nowrap;
}

.bl-perf-table thead th.ta-r { text-align: right; }

.bl-perf-table tbody tr {
  transition: background 0.15s;
}

.bl-perf-table tbody tr:hover {
  background: rgba(157,141,241,0.05);
}

.bl-perf-table tbody td {
  padding:        10px 12px;
  border-bottom:  1px solid var(--ft-border);
  white-space:    nowrap;
  vertical-align: middle;
  color:          var(--ft-text);
}

.bl-perf-table tbody td.ta-r {
  text-align:            right;
  font-feature-settings: "tnum" 1;
}

.bl-perf-cat-link {
  font-size:   13px;
  font-weight: 500;
  color:       var(--ft-text);
  cursor:      pointer;
}

.bl-perf-cat-link:hover { color: var(--mud-palette-primary); }

/* ─── Period Tabs ─── */
.bl-period-tabs {
  display:       flex;
  gap:           2px;
  background:    var(--ft-surface2);
  border:        1px solid var(--ft-border);
  border-radius: 8px;
  padding:       3px;
}

.bl-period-tab {
  font-size:     11px;
  font-weight:   600;
  padding:       4px 10px;
  border-radius: 6px;
  border:        none;
  cursor:        pointer;
  background:    transparent;
  color:         var(--ft-muted);
  transition:    background 0.15s, color 0.15s;
}

.bl-period-tab.active {
  background: var(--mud-palette-surface);
  color:      var(--ft-text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ─── Goals Grid ─── */
.bl-goals-grid {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.bl-goal-card {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       12px;
  background:    var(--ft-surface2);
  border:        1px solid var(--ft-border);
  border-radius: 8px;
  cursor:        pointer;
  transition:    background 0.15s, border-color 0.15s;
}

.bl-goal-card:hover {
  background:    var(--ft-surface3);
  border-color:  rgba(157,141,241,0.4);
}

/* ─── Dashboard Footer ─── */
.bl-dashboard-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             12px;
  padding:         20px 0 0;
  border-top:      1px solid var(--ft-border);
  font-size:       12px;
  color:           var(--ft-muted);
  margin-top:      8px;
}

/* ─── Responsiveness ─── */
@media (max-width: 600px) {
  .bl-appbar .bl-search-pill { display: none; }
  .bl-page-header { flex-direction: column; align-items: stretch; }
  .bl-kpi-amount { font-size: 1.4rem; }
  .bl-dashboard-footer { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ─── Smooth entrance animation ─── */
@keyframes bl-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bl-kpi-card,
.bl-widget-card.mud-paper {
  animation: bl-fade-up 0.3s ease both;
}

.bl-kpi-card:nth-child(1) { animation-delay: 0.05s; }
.bl-kpi-card:nth-child(2) { animation-delay: 0.10s; }
.bl-kpi-card:nth-child(3) { animation-delay: 0.15s; }
.bl-kpi-card:nth-child(4) { animation-delay: 0.20s; }


/* ---- Summary Chips ---- */
.ft-summary-chip {
  display:       inline-block;
  font-size:     12px;
  font-weight:   600;
  padding:       3px 10px;
  border-radius: 12px;
  background:    rgba(140,140,148,0.12);
  color:         var(--ft-muted);
  border:        1px solid rgba(140,140,148,0.25);
  white-space:   nowrap;
}

/* ---- Two-column widget grid ---- */
.ft-widget-2col {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   24px;
  align-items:           start;
}

.ft-widget-2col > * { min-width: 0; min-height: 0; overflow: hidden; }

@media (max-width: 768px) {
  .ft-widget-2col { grid-template-columns: 1fr; }
}

/* ---- Three-column widget grid ---- */
.ft-widget-3col {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   24px;
  align-items:           start;
}

.ft-widget-3col > * { min-width: 0; overflow: hidden; }

@media (max-width: 1100px) {
  .ft-widget-3col { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .ft-widget-3col { grid-template-columns: 1fr; }
}

/* ---- Main + aside (2fr / 1fr) ---- */
.ft-widget-main-aside {
  display:               grid;
  grid-template-columns: 2fr 1fr;
  gap:                   24px;
  align-items:           start;
}

.ft-widget-main-aside > * { min-width: 0; overflow: hidden; }

@media (max-width: 900px) {
  .ft-widget-main-aside { grid-template-columns: 1fr; }
}

/* ---- SVG Goal Ring ---- */
.ft-goal-ring-track {
  fill:         none;
  stroke:       var(--ft-border);
  stroke-width: 8;
}

.ft-goal-ring-fill {
  fill:            none;
  stroke-width:    8;
  stroke-linecap:  round;
  transition:      stroke-dashoffset 0.5s ease;
}

/* ---- Masked field ---- */
.ft-masked {
  filter:         blur(4px);
  user-select:    none;
  pointer-events: none;
  transition:     filter 0.2s ease;
}

/* ---- Blazor Error Boundary ---- */
.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color:   white;
}

.blazor-error-boundary::after { content: "An error has occurred." }

/* ─── Weekly Set-Aside Breakdown Table ─── */
.bl-setaside-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       13px;
  font-family:     'Inter', sans-serif;
}

.bl-setaside-table thead th {
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--ft-muted);
  padding:        8px 12px;
  text-align:     left;
  border-bottom:  1px solid var(--ft-border);
  white-space:    nowrap;
}

.bl-setaside-table thead th.ta-r  { text-align: right; }
.bl-setaside-table thead th.fully-funded-col {
  text-align:  right;
  color:       var(--gain);
  font-weight: 800;
}

/* Category sub-header row */
.bl-setaside-cat-row td {
  padding:          8px 12px 4px;
  background:       var(--ft-surface2);
  border-top:       1px solid var(--ft-border);
  border-bottom:    1px solid var(--ft-border);
  font-size:        11px;
  font-weight:      700;
  letter-spacing:   0.08em;
  text-transform:   uppercase;
  color:            var(--ft-muted);
  white-space:      nowrap;
}

/* Individual expense rows */
.bl-setaside-row td {
  padding:        10px 12px;
  border-bottom:  1px solid var(--ft-border);
  vertical-align: middle;
  color:          var(--ft-text);
}

.bl-setaside-row td.ta-r {
  text-align:            right;
  font-feature-settings: "tnum" 1;
}

.bl-setaside-row:hover td { background: rgba(157,141,241,0.04); }

/* Wk4 fully-funded column highlight */
.bl-setaside-table tbody td:last-child,
.bl-setaside-table tfoot td:last-child {
  background: rgba(61,214,140,0.06);
}

/* Category subtotal rows */
.bl-setaside-subtotal-row td {
  padding:          6px 12px;
  background:       var(--ft-surface2);
  border-bottom:    1px solid var(--ft-border);
  font-size:        12px;
  font-weight:      600;
}

.bl-setaside-subtotal-row td.ta-r {
  text-align:            right;
  font-feature-settings: "tnum" 1;
}

/* Grand total footer */
.bl-setaside-total-row td {
  padding:       12px;
  background:    var(--ft-surface2);
  border-top:    2px solid var(--ft-border);
  font-size:     13px;
  font-weight:   700;
  color:         var(--ft-text);
  white-space:   nowrap;
}

.bl-setaside-total-row td.ta-r {
  text-align:            right;
  font-feature-settings: "tnum" 1;
}

@media (max-width: 768px) {
  .bl-setaside-table thead th,
  .bl-setaside-row td,
  .bl-setaside-subtotal-row td,
  .bl-setaside-total-row td { padding: 8px 8px; }
}