*{margin:0;padding:0;box-sizing:border-box}

/* TOKENS */
:root{
  --container-max: 1368px;
  --right-rail: 460px;

  --blue-900: #0f1724;
  --blue-700: #0f766e;
  --tab-pill: #0f766e;

  --bg-app: #f1f5f9;
  --bg-card: #ffffff;
  --bg-input: #ffffff;

  --text-strong: #0f172a;
  --text: #334155;
  --text-muted: #64748b;

  --border: #e2e8f0;
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 16px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg: 0 10px 30px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06);

  --text-primary: #ffffff;
  --text-secondary: #94a3b8;
  --accent-blue: #0f766e;
  --accent-cyan: #14b8a6;
  --accent-purple: #7c3aed;
  --accent-teal: #14b8a6;
  --border-color: #334155;
  --border-light: #475569;
  --success-color: #059669;
  --warning-color: #d97706;
  --error-color: #dc2626;

  --cta: #d97706;
  --green-soft: #f0fdf9;
  --green-soft-border: #a7f3d0;

  --goals-navy: #0f1724;

  --primary: #0f766e;
  --primary-light: #14b8a6;
  --gold: #d97706;
  --gold-light: #f59e0b;
  --charcoal: #0f1724;
  --navy: #1e293b;
}

/* BASE */
body{font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial;background:var(--bg-app);color:var(--text-strong);line-height:1.6}

/* HEADER */
.app-header{background:linear-gradient(135deg,#0f1724 0%,#162032 100%);color:#fff;border-bottom:1px solid rgba(255,255,255,0.06);box-shadow:0 2px 12px rgba(0,0,0,0.25);}
.header-inner{
  width:100%;
  margin:0 auto; padding:14px 24px;
  display:grid;grid-template-columns:240px 1fr 260px;align-items:center;gap:12px
}
p{color:#475569;}
.brand-logo {
  max-height: 44px;
  object-fit: contain;
}
.brand{display:flex;align-items:center;gap:10px;color:#fff}
.brand-sub{font-size:11px;opacity:.65;letter-spacing:0.4px;text-transform:uppercase}
.app-title{text-align:center;font-size:18px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.9);}
.app-title span{display:block;font-size:11px;font-weight:400;letter-spacing:2px;color:var(--gold-light);text-transform:uppercase;margin-top:2px;}
.sign-holder{display:flex;justify-content:flex-end;align-items:center;gap:8px;}
.sign-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.9);padding:7px 14px;border-radius:8px;cursor:pointer;margin-right:4px;font-size:13px;transition:all 0.2s ease;}
.sign-btn:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);}

/* TABS */
.tabs-bar{background:#1e293b;border-bottom:2px solid rgba(255,255,255,0.06);}
.tabs{
    width: 100%;
    margin: 0 auto;
    display: flex;
    gap: 0;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.tab-btn{
  border:none;cursor:pointer;background:transparent;color:rgba(255,255,255,.55);
  padding:13px 18px;display:inline-flex;gap:7px;align-items:center;font-weight:500;font-size:13px;
  letter-spacing:0.3px;border-bottom:2px solid transparent;transition:all 0.2s ease;position:relative;top:2px;
}
.tab-btn.active{color:#fff;border-bottom-color:var(--primary-light);}
.tab-btn:hover{color:rgba(255,255,255,.85);background:rgba(255,255,255,.05);}
.tab-btn svg{color:currentColor}

/* MAIN */
.main{width:100%;margin:0 auto;padding:20px}
.tab-content{display:none;animation:fade .25s ease}
.tab-content.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* DASHBOARD GRID */
.dashboard{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:24px;
  width:100%;
  align-items:start;
}
.dash-left{ min-width:0;}
.dash-right{ min-width:0;}
.dash-left,.dash-right{display:flex;flex-direction:column;gap:20px}

/* CARDS */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm);padding:20px}
.section{padding:16px 16px 12px}
.page-card{padding:24px}
.section-title,.page-title{display:flex;align-items:center;gap:10px;margin-bottom:20px;border-bottom:1px solid var(--border);padding-bottom:12px}
.section-title h3,.page-title h3, .allocation-card h3, .summary-card h3{
    font-size: 16px;
    color: var(--text-strong);
    font-weight: 700;
    letter-spacing: 0.2px;
}
.icon-circle,.icon-square{width:32px;height:32px;display:grid;place-items:center;font-size:13px;color:#fff;border-radius:8px;background:var(--primary);padding:6px;flex-shrink:0;}
.icon-circle.small{width:22px;height:22px;font-size:11px}
.icon-square{border-radius:8px}

/* GRID ROWS */
.row-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.row-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}

/* FIELDS */
.field{min-width:0;overflow:hidden}
.field label{
    display: block;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.text-input{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text-strong); font-size: 14px; font-weight: 500;}
.slider-line{display:flex;align-items:center;gap:14px;min-width:0}
.slider{flex:1 1 auto;min-width:0;height:4px;background:#cbd5e1;border-radius:4px;-webkit-appearance:none;appearance:none;cursor:pointer;accent-color:var(--primary);}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2.5px solid var(--primary);box-shadow:0 1px 6px rgba(15,118,110,.3);transition:transform 0.15s ease;}
.slider::-webkit-slider-thumb:hover{transform:scale(1.15);}
.slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2.5px solid var(--primary);box-shadow:0 1px 6px rgba(15,118,110,.3);}
.value-pill{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;border:none;
  border-radius:999px;min-height:36px;white-space:nowrap;max-width:100%;
}
.value-pill input{
  width:30px;min-width:60px; height: 30px; border:none;background:#fff;text-align:center;color:#000000;font-weight:500;letter-spacing:.2px;border-radius: 6px;border:solid 1px #eee;
}
.value-pill span{color:#000000;font-weight:400;margin-left:2px; font-size: 14px;}

/* CHARTS */
.chart-carousel-container{position:relative;overflow:hidden}
.chart-wrapper{position:relative;height:380px}
.chart-item{display:none;background:#fff;border:1px solid var(--border);border-radius:8px;padding:10px}
.chart-item.active{display:block}
.chart-item h4{color:#5a6e95;text-align:center;margin-bottom:6px}
.carousel-nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border:none;border-radius:50%;
  background:rgba(0,0,0,.25);color:#fff;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .15s ease
}
.chart-carousel-container:hover .carousel-nav-btn,
.chart-carousel-container:focus-within .carousel-nav-btn{opacity:1;pointer-events:auto}
.carousel-nav-btn:hover{background:rgba(0,0,0,.45)}
.carousel-nav-btn.prev{left:10px}
.carousel-nav-btn.next{right:10px}
.carousel-pagination{text-align:center;padding-top:8px}
.carousel-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#ccd6ea;margin:0 4px}
.carousel-dot.active{background:#4e80ff}

/* RIGHT RAIL */
.rail-aside{
  display:flex;
  flex-direction:column;
  gap:20px;
  top:96px
}
.rail-host{display:block}
.goals-card{background:linear-gradient(160deg,#0f1724 0%,#1e2d40 100%);color:#ffffff;border:none;box-shadow:var(--shadow-md)}
.right-title{display:flex;gap:10px;margin-bottom:20px;border-bottom:1px solid #353279;padding-bottom:10px}
.icon-square.light{
    background: #fff;
    color: #0e2a66;
}
.goals-list{display:grid;grid-template-columns:1fr;gap:10px;min-height:60px}

/* Expense grid — left column version (wider inputs) */
.expense-grid { display: flex; flex-direction: column; gap: 8px; }
.expense-row { display: grid; grid-template-columns: 1fr 150px 80px 36px; gap: 10px; align-items: center; }
.expense-row input {
  height: 38px; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: #fff;
  color: var(--text-strong); font-size: 13px;
  transition: border-color 0.2s ease;
}
.expense-row input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(15,118,110,0.12); }
.expense-row input::placeholder { color: var(--text-muted); font-size: 12px; }
.expense-row .btn-del { width:36px;height:36px;border-radius:8px;border:0;background:#fee2e2;color:#dc2626;display:inline-flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer;font-size:14px;transition:all 0.15s ease; }
.expense-row .btn-del:hover { background:#dc2626; color:#fff; }

.add-expense-btn {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px dashed var(--primary);
  color: var(--primary);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.add-expense-btn:hover { background: #f0fdf9; border-style: solid; }

.btn-link{
    margin-top: 15px;
    background: transparent;
    border: none;
    color: #29D3C0;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
}
.cta-orange{width:100%;background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 100%);color:#fff;border:none;border-radius:12px;padding:14px 18px;font-weight:700;display:inline-flex;align-items:center;gap:8px;justify-content:center;box-shadow:0 4px 14px rgba(217,119,6,.3);cursor:pointer;font-size:16px;margin-top:10px;letter-spacing:0.3px;transition:all 0.2s ease;}

/* SUMMARY */
.summary-card{background:var(--green-soft);border-color:var(--green-soft-border);padding-top:14px;margin-top:15px;}
.summary-card .right-title{border-color:rgba(5,150,105,0.3);}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.stat{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px 14px;border-left:3px solid var(--primary);}
.stat.full{grid-column:1/-1}
.stat p{
    color: var(--text-muted);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
    line-height: 1.3;
}
.stat-val{font-family:'Courier New',monospace;font-weight:800;font-size:24px;letter-spacing:.2px;color:var(--text-strong);font-variant-numeric:tabular-nums}
.stat-sub{font-size:12px;color:var(--primary);margin-top:4px;font-weight:500}

/* ALLOCATION */
.allocation-card .alloc-list{display:inline-block;flex-direction:row;gap:20px;}
.alloc-row{display:inline-flex;justify-content:space-evenly;align-items:flex-start;border:1px solid var(--border);border-radius:12px;min-height:46px;padding:12px 25px;color:#fff;margin:0 0 1rem 0;}
.alloc-row.shade-1{background:linear-gradient(135deg,#0f766e,#14b8a6)}
.alloc-row.shade-2{background:linear-gradient(135deg,#0f6460,#0f766e)}
.alloc-row.shade-3{background:linear-gradient(135deg,#d97706,#f59e0b)}
.alloc-row span:first-child{
    font-weight: 600;
    margin-right: 15px;
}
.alloc-row strong{font-weight:700}
.muted{opacity:.9;color:#e4ebff;margin-left:8px}
.alloc-note{margin-top:10px;background:#f6f8fe;border:1px solid var(--border);border-radius:8px;padding:10px;color:#586a8d;font-size:12px}
.alloc-pills{
    display: flex;
    width: 100%;
    justify-content: space-around;
}
.alloc-pills .alloc-row{flex:1;min-height:20px;border-radius:10px;border:1px solid #14B8A6;background:#5E76A3;color:#fff;font-size: 18px;}
.alloc-pills .alloc-row.shade-2{background:#5E76A3;}
.alloc-pills .alloc-row.shade-3{background:#5E76A3;}
.alloc-pills .muted{color:#fff;}

/* YEARLY + TABLES */
.page-title .d-flex{display:flex;gap:10px;}
.page-title{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:16px;
  justify-content: space-between;
  flex-wrap:wrap;
}
.yearly-controls{display:flex;justify-content:space-between;gap:14px;margin-bottom:12px}
.download-btn{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-size:14px;margin:10px 0;transition:all 0.2s ease;}
.phase-selector{display:flex;justify-content:center;gap:.5rem;margin:10px 0;flex-wrap:wrap;}
.phase-btn{border:1px solid var(--border);background:#fff;border-radius:8px;padding:8px 20px;color:var(--text-strong);font-weight:500;cursor:pointer;font-size:14px;min-width:200px;transition:all 0.2s ease;}
.phase-btn.active,.phase-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary);}
.yearly-table-container{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:auto;max-height:800px}
.table-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;color:#667}
.loading-spinner{width:32px;height:32px;border:3px solid var(--border);border-top:3px solid var(--blue-700);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:10px}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.yearly-table{width:100%;border-collapse:collapse;font-size:15px}
.yearly-table th{
    position: sticky;
    top: 0;
    background: var(--charcoal);
    color: rgba(255,255,255,0.9);
    border-right: 1px solid rgba(255,255,255,0.1);
    padding: 12px 14px;
    text-align: center;
    z-index: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.yearly-table td{padding:14px 12px;border-bottom:1px solid var(--border);text-align:center}
.yearly-table tbody tr:hover{background:#f1f6ff}

#historyTableBody td:first-child {padding-left: 40px;text-align: left;}
.age-link {
    text-decoration: underline;
    color: #F59E0B;
    cursor: pointer;
    font-weight: 600;
    transition: color 0.2s ease;
}
.age-link:hover {
    color: var(--accent-blue);
}

.positive-return{ color: var(--success-color); }
.negative-return{ color: var(--error-color); }
.growth{ color: var(--accent-blue) }
.expense{ color: var(--warning-color); }
.withdraw{ color: #C59560; }
.tax{ color: var(--error-color); }

/* POPUP */
.popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;justify-content:center;align-items:center;z-index:1000;backdrop-filter:blur(3px)}
.popup-content{background:#fff;color:#111;padding:28px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);width:90%;max-width:380px;position:relative}
.popup-close-btn{position:absolute;top:8px;right:12px;font-size:28px;color:#aaa;cursor:pointer}
.popup-action-btn{padding:10px 14px;border:none;border-radius:8px;background:#28a745;color:#fff;font-weight:700;cursor:pointer}

/* FOOTER */
.app-footer{width:100%;margin:20px auto 0;background:#f5f7f8;border:1px solid var(--border);border-radius:10px;text-align:center;padding:12px;color:#7a879b;font-size:12px;}

/* AUTH */
.auth-container{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:2000;backdrop-filter:blur(5px)}
.auth-form-container{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);width:90%;max-width:400px;border:1px solid var(--border);text-align:center}
.auth-form-container h2{margin-bottom:1rem;color:#111;font-weight:700}
.auth-form-container input{width:100%;padding:.8rem;margin:.75rem 0;border-radius:8px;border:1px solid var(--border);background:#fff;color:#111}
.auth-btn{width:100%;padding:.8rem;border:none;border-radius:8px;background:var(--primary);color:#fff;font-weight:700;cursor:pointer;transition:all 0.2s ease;}
.google-btn{background:#fff;color:#333;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;gap:.75rem}
.error-message{color:#c02626;min-height:1.2em;margin:.5rem 0}

/* ACCESSIBILITY */
/* :focus{outline:2px solid rgba(20,110,245,.35);outline-offset:2px} */

/* Responsive two-column layout for pages with rail */
.page-with-rail{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--right-rail);
  gap:24px; align-items:start;
}
.left-col{display:flex;flex-direction:column;gap:16px}

/* Term Settings: 4-column grid (Durations + 3 buckets) */
.buckets-grid.with-durations{
  display:grid; gap:10px;
  grid-template-columns:250px 1fr 1fr 1fr;
  margin-top:25px;
}
.bucket-card.duration-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;height:fit-content;}
.bucket-header{border-bottom:1px solid var(--border);padding-bottom:10px;margin-bottom:12px}
.bucket-card{padding:14px;}
.buckets-grid p{
  font-size:14px;
  line-height: 1.3;
  margin: 5px 0;
}
.bucket-header h4{
    font-size: 15px;
    color: var(--text-strong);
    font-weight: 700;
}
.parameter-group{margin-bottom:12px}
.parameter-group label{
    display: block;
    font-weight: 500;
    color: var(--text-muted);
    margin: 0 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Durations */
.duration-card{
  background:#fff;
  border-color:#eee;
}
.duration-card .duration-note{
  margin-top:10px;background:#eef5ff;border-left:3px solid #146ef5;color:#2c4b8a;
  padding:10px;border-radius:8px;font-size:.9rem
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

/* AUTH MODAL ENHANCEMENTS */
.auth-form-container {
  position: relative;
  padding: 2.5rem 2rem 2rem;
  max-width: 420px;
}
.auth-form-container h2 {
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.auth-subheading {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
}
.auth-form-container .input-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.auth-form-container input {
  margin: 0;
}
.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #ccc;
  margin: 1.5rem 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #e0e0e0;
}
.auth-divider span {
  padding: 0 1rem;
}
.google-btn {
  background: #fff;
  color: #333;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.google-btn:hover {
  background-color: #f7f7f7;
  border-color: #ccc;
}
.google-btn img {
  width: 18px;
  height: 18px;
}

#historyTableBody .update-btn{border:none !important;}
#historyTableBody .remove-btn{background:#EF4444 !important;border-radius:5px !important;}
#historyTableBody .load-btn{background:#2196F3 !important;border-radius:5px !important;}
.card-grey, #yearly .card, #term-settings .left-col .card, #bucket1 .card, #bucket2 .card, #bucket3 .card{background:#f8fafc;}
.graph-section{margin-bottom:15px;}
#auth-action-text{
    background-color: var(--primary);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}
#interactive-controls .right-title{border-bottom:solid 1px rgba(238, 238, 238, 0.45);}
.graph-card{margin-bottom:15px;}
#term-settings .card{margin-top:15px;}
#term-settings .expense-row{grid-template-columns: 1fr 80px 50px 35px;}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(20, 30, 60, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s;
}
.popup-content {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(30, 40, 90, 0.18);
  padding: 32px 28px 24px 28px;
  max-width: 350px;
  width: 90vw;
  text-align: center;
  position: relative;
  animation: popupFadeIn 0.3s;
}
@keyframes popupFadeIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.popup-close-btn {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 1.6rem;
  color: #888;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}
.popup-close-btn:hover {
  color: #e74c3c;
}
.popup-content h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.5rem;
  color: #0e2a66;
  font-weight: 700;
}
.popup-content p {
  color: #444;
  margin-bottom: 22px;
  font-size: 1rem;
}
.popup-action-btn {
  background: linear-gradient(90deg, #ff9800 0%, #ff5722 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 32px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.12);
  transition: background 0.2s, box-shadow 0.2s;
}
.popup-action-btn:hover {
  background: linear-gradient(90deg, #ff5722 0%, #ff9800 100%);
  box-shadow: 0 4px 16px rgba(255, 87, 34, 0.18);
}

.search-bar-container {
  position: relative;
  width: 40%;
  margin-bottom: 1rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 2rem;
}
.search-icon {
  position: absolute;
  text-align: end;
  margin-right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #727299;
  font-size: 1.1rem;
  pointer-events: none;
  transition: opacity 0.2s;
}
.historySearchInput {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2rem;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid var(--text-muted);
  background-color: var(--bg-input);
  color: var(--text-strong);
}
.historySearchInput:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(15,118,110,0.2);
}
#historyCount{
  margin-left: 2rem;
  font-size: 16px;
  color: var(--text-strong);
  font-weight: 600;
  padding: 10px;
}
#historyPaginationContainer{
  text-align: center;
  margin-top: 1.5rem;
}

html, body {
  height: 100%;
  margin: 0;
}
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; 
}
.main {
  flex: 1; 
}
.app-footer{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    padding: 12px 20px;
}

/* --- RESPONSIVE STYLES --- */
@media (max-width:1500px){ .row-4{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:1200px){
  .dashboard{grid-template-columns:1fr}
  .header-inner{grid-template-columns:200px 1fr 180px}
  .page-with-rail{grid-template-columns:1fr}
  .rail-aside{position:static}
  #term-settings .expense-row{grid-template-columns: 1fr 80px 50px 35px;}
}
@media (max-width:1400px){
    .buckets-grid.with-durations{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
    .row-4,.row-3{grid-template-columns:repeat(2,minmax(0,1fr))}
    .buckets-grid.with-durations{grid-template-columns:1fr}
}
@media (max-width: 992px) {
  .dashboard{display:flex;flex-direction:column;gap:16px;}
  .dash-left,.dash-right{ width:100%;}
  .portfolio-builder-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
   footer.app-footer{justify-content: center;gap:0;}
  .buckets-grid.with-durations {grid-template-columns: 1fr !important;}
  .header-inner{grid-template-columns: 125px 1fr;}
  .phase-btn{min-width:unset;padding:8px 25px;}
  .app-title{display:none;}
}
@media (max-width: 480px) {
    .tab-btn{padding: 8px 20px;}
    .expense-row{grid-template-columns: 80px 80px 40px 35px !important;}
    .download-btn{font-size:14px;font-weight:600;}
    .page-with-rail{display:block;}
    #term-settings .expense-row {grid-template-columns: 80px 80px 50px 35px;}
}
.goals-card h3{font-weight:500;line-height: 1.2;}

/* --- UPDATED AND NEW STYLES FOR INVESTMENT TAB --- */
.plan-selector-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 20px;
    margin-bottom: 30px;
}
.plan-card {
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.plan-card:hover {
    border-color: var(--blue-700);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.plan-card.active {
    border-color: var(--primary);
    background-color: #f0fdf9;
    box-shadow: 0 0 0 3px rgba(15,118,110,0.2);
}
.plan-card h4 {
    color: var(--charcoal);
    font-size: 1rem;
    margin-bottom: 8px;
    font-weight: 700;
}
.plan-card p {
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.5;
}

.portfolio-builder-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.portfolio-bucket {
    background-color: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    border-top: 3px solid var(--primary);
}
#portfolioBucket2 { border-top-color: #0891b2; }
#portfolioBucket3 { border-top-color: var(--gold); }

.portfolio-bucket .bucket-header {
    border-bottom: 1px solid #cbd5e1;
    margin-bottom: 16px;
}
.portfolio-bucket .bucket-header p {
    font-size: 14px;
}

.bucket-results {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.result-stat {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}
.result-stat span {
    color: var(--text);
}
.result-stat strong {
    color: var(--text-strong);
    font-family: 'Courier New', monospace;
}

.investment-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    min-height: 120px;
    margin-bottom: 16px;
}

.investment-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease-in-out;
}
.investment-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.investment-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.investment-card-header label {
    font-weight: 600;
    color: var(--text-strong);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.investment-card .remove-investment-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: #fee2e2;
    color: #ef4444;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
.investment-card:hover .remove-investment-btn {
    opacity: 1;
}
.investment-card .remove-investment-btn:hover {
    background: #ef4444;
    color: #fff;
}

.add-investment-container {
    position: relative;
    margin-top: 10px;
}
.add-investment-btn {
    width: 100%;
    padding: 10px;
    font-weight: 600;
    font-size: 14px;
    color: var(--primary);
    background: #f0fdf9;
    border: 1px dashed #99e6da;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.add-investment-btn:hover {
    background: #ccfbf1;
    border-color: var(--primary);
    border-style: solid;
}

.investment-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    z-index: 100;
    padding: 8px;
    margin-top: 4px;
}
.investment-dropdown-menu input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 14px;
}
.investment-dropdown-menu input[type="text"]:focus {
    outline: 2px solid var(--blue-700);
    outline-offset: 0;
}
.investment-dropdown-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.investment-dropdown-menu li {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 14px;
}
.investment-dropdown-menu li:hover {
    background-color: #f1f5f9;
    color: var(--text-strong);
}


@media (max-width: 1000px) {
    .portfolio-builder-grid {
        grid-template-columns: 1fr;
    }
}

/* TOOLTIP */
.tooltip-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #a0aec0;
    color: white;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    font-weight: bold;
    position: relative;
    margin-left: 6px;
}

.tooltip-icon:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%; /* Position above the icon */
    left: 50%;
    transform: translateX(-50%);
    background-color: #2d3748;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    width: 250px;
    text-align: left;
    white-space: normal;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.tooltip-icon:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #2d3748 transparent transparent transparent;
}

.demo-btn {
    background-color: var(--gold) !important;
    color: #fff !important;
    margin-right: 10px;
}
.demo-btn:hover {
    background-color: var(--gold-light) !important;
    color: #fff !important;
}

.sign-holder {
    display: flex;        /* Ensures items are in a row */
    align-items: center;  /* Vertically aligns items */
    justify-content: flex-end; /* Pushes items to the right */
    flex-shrink: 0;       /* Prevents the container from shrinking */
}

/* Ensure buttons don't wrap their text */
.sign-holder .sign-btn {
    white-space: nowrap; /* Prevents text inside the button from wrapping */
    flex-shrink: 0;      /* Prevents the button itself from shrinking */
}

/* --- Creative Demo Booking Modal Design --- */

/* Style the modal container */
.booking-modal .auth-form-container {
    padding: 0; /* Remove default padding */
    border: 1px solid var(--blue-900);
    max-width: 450px;
    text-align: center;
}

/* Style the header of the modal */
.booking-modal h2 {
    background: linear-gradient(135deg,#0f1724,#162032);
    color: #ffffff;
    padding: 20px;
    margin: 0;
    font-size: 1.4rem;
    border-radius: 11px 11px 0 0;
}

/* Style the descriptive paragraph */
.booking-modal .auth-subheading {
    padding: 0 30px;
    margin-top: 15px;
    color: var(--text);
}

/* Style the form area */
.booking-modal #demoBookingForm {
    padding: 20px 30px 30px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between form fields */
}

/* Style all input fields (text, email, date, time) */
.booking-modal #demoBookingForm input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    background-color: #f8fafc;
}
.booking-modal #demoBookingForm input:focus {
    border-color: var(--blue-700);
    box-shadow: 0 0 0 2px rgba(20, 110, 245, 0.2);
    outline: none;
}

/* Style the submit button to match your "Book a Demo" button */
.booking-modal #submitBookingBtn {
    background: var(--cta); /* Use the gold/orange color */
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.2s ease;
}

.booking-modal #submitBookingBtn:hover {
    background: #e08e1a; /* A slightly darker shade for hover */
}

.phone-input-container {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: #f8fafc;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.phone-input-container:focus-within {
    border-color: var(--blue-700);
    box-shadow: 0 0 0 2px rgba(20, 110, 245, 0.2);
}

.country-code {
    padding: 12px;
    font-size: 1rem;
    color: var(--text);
    background-color: #eef2f7;
    border-right: 1px solid var(--border);
}

.phone-input-container input#bookingPhone {
    border: none;
    background: none;
    box-shadow: none;
    padding: 12px;
    flex-grow: 1; /* Allows the input to fill the remaining space */
}

.phone-input-container input#bookingPhone:focus {
    box-shadow: none;
    outline: none;
}

/* Add this CSS to your styles.css file */
.checkbox-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 1.4;
    color: #181616;
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox-container .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.checkbox-container:hover input ~ .checkmark {
    background-color: #ccc;
}

.checkbox-container input:checked ~ .checkmark {
    background-color: var(--blue-700);
}

#proceedWithSimulationBtn:disabled {
    background-color: #a0aec0;
    cursor: not-allowed;
}


/* Add these styles to styles.css */

.modal-button-group {
    display: flex;
    gap: 1rem;
    justify-content: flex-end; /* Aligns buttons to the right */
    margin-top: 1.5rem;
}

.modal-button-group .auth-btn {
    margin-top: 0; /* Override any default margin */
    width: auto;   /* Allow buttons to size based on their text */
    padding: 0.75rem 1.5rem;
}

.auth-btn.secondary-btn {
    background-color: transparent;
    color: #6b7280; /* A neutral gray color */
    border: 1px solid #d1d5db; /* A light border */
}

.auth-btn.secondary-btn:hover {
    background-color: #f3f4f6; /* A subtle hover effect */
    color: #111827;
}


/* In styles.css, ADD or VERIFY these styles */

.question-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
}

.question-header h4 {
    margin: 0; /* Remove default margins from h4 */
}

.tooltip-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #a0aec0;
    color: white;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    position: relative;
    cursor: help;
    flex-shrink: 0;
}

.tooltip-icon:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%; /* Position above the icon */
    left: 50%;
    transform: translateX(-50%);
    background-color: #2d3748;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    width: 280px; /* Increased width for better text flow */
    text-align: left;
    white-space: normal;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.tooltip-icon:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #2d3748 transparent transparent transparent;
}

/* In static/css/admin.css, add these styles */

.action-btn.decline {
    background-color: #fee2e2;
    color: #991b1b;
}
.action-btn.decline:hover {
    background-color: #fecaca;
}

.quiz{
  text-align: left;
  margin-left: 2%;
}

/* In static/css/styles.css */

#riskNavButtons .auth-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #a0aec0; /* Optional: Change background for disabled state */
    border-color: #cbd5e1;   /* Optional: Change border */
    color: #4a5568;         /* Optional: Change text color */
}

/* Ensure secondary button styles don't fully override disabled styles */
#riskNavButtons .auth-btn.secondary-btn:disabled {
    background-color: transparent; /* Keep background transparent if desired */
    border-color: #cbd5e1;
    color: #a0aec0; /* Lighter text color */
}

/* --- START FIX: ADD TOAST ANIMATIONS --- */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}
/* --- END FIX --- */

/* to keep footer at the top */
html, body {
  height: 100%;
  margin: 0;
}
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; 
}
.main {
  flex: 1; 
}
.app-footer{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    padding: 12px 20px;
}
/* ============================================================
   RESPONSIVE — TABLET  (<=1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .header-inner { grid-template-columns: auto 1fr auto; gap: 8px; padding: 12px 16px; }
  .app-title { font-size: 18px; }
  .dashboard { grid-template-columns: 1fr; }
  .dash-left, .dash-right { width: 100%; }
  .page-with-rail { grid-template-columns: 1fr; }
  .buckets-grid.with-durations { grid-template-columns: 1fr 1fr; }
  .row-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   RESPONSIVE — MOBILE  (<=768px)
   ============================================================ */
@media (max-width: 768px) {
  .header-inner { grid-template-columns: 1fr auto; grid-template-rows: auto auto; padding: 10px 14px; }
  .app-title { grid-column: 1 / -1; font-size: 16px; text-align: left; margin-top: 4px; }
  .brand-sub { display: none; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 0 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { font-size: 14px; padding: 10px 14px; white-space: nowrap; flex-shrink: 0; }
  .main { padding: 12px; }
  .card, .section, .page-card { padding: 12px; }
  .dashboard { grid-template-columns: 1fr; gap: 12px; }
  .dash-left, .dash-right { width: 100%; }
  .row-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .row-3 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .page-with-rail { grid-template-columns: 1fr; gap: 12px; }
  .buckets-grid.with-durations { grid-template-columns: 1fr; }
  .alloc-pills { flex-direction: column; gap: 8px; }
  .alloc-pills .alloc-row { font-size: 15px; }
  .stat-grid { grid-template-columns: 1fr; }
  .stat.full { grid-column: 1; }
  .yearly-table-container { overflow-x: auto; }
  .yearly-table { font-size: 13px; }
  .yearly-table th, .yearly-table td { padding: 10px 8px; }
  .chart-wrapper { height: 280px; }
  .expense-row { grid-template-columns: 1fr 1fr auto auto; gap: 6px; }
  .cta-orange { font-size: 16px; padding: 12px; }
  .auth-form-container { width: 95%; padding: 1.5rem 1rem; }
  .phase-btn { min-width: unset; font-size: 15px; padding: 8px 12px; }
  .download-btn { font-size: 14px; padding: 8px 12px; }
  .popup-content { width: 95%; padding: 20px 16px; }
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE  (<=480px)
   ============================================================ */
@media (max-width: 480px) {
  .header-inner { padding: 8px 10px; }
  .brand-logo { max-height: 36px; }
  .app-title { font-size: 14px; }
  .sign-btn { padding: 6px 8px; font-size: 13px; }
  .tab-btn { font-size: 13px; padding: 8px 10px; }
  .row-4 { grid-template-columns: 1fr; }
  .row-3 { grid-template-columns: 1fr; }
  .stat-val { font-size: 18px; }
  .chart-wrapper { height: 240px; }
  .expense-row { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .expense-row .btn-del { grid-column: 2; justify-self: end; }
  .phase-selector { gap: 6px; }
  .phase-btn { font-size: 13px; padding: 7px 10px; }
}

/* ═══════════════════════════════════════════════
   PHASES 2-8  NEW COMPONENT STYLES
   ═══════════════════════════════════════════════ */

/* Net Worth Summary Cards */
.nw-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:20px; }
.nw-card { background:#fff; border:1px solid var(--border); border-radius:10px; padding:16px; text-align:center; box-shadow:var(--shadow-sm); }
.nw-card .nw-label { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.nw-card .nw-value { font-size:22px; font-weight:700; color:var(--text-strong); }
.nw-gain.positive { color:#059669; }
.nw-gain.negative { color:#dc2626; }
.nw-gain-pct.positive { color:#059669; }
.nw-gain-pct.negative { color:#dc2626; }

/* Allocation Bar */
.allocation-bar-wrap { margin:16px 0 8px; }
.alloc-bar { display:flex; height:12px; border-radius:6px; overflow:hidden; background:#f1f5f9; }
.alloc-segment { height:100%; transition:width .4s; }
.alloc-legend { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.alloc-dot { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--text); }
.alloc-dot span { display:inline-block; width:10px; height:10px; border-radius:50%; }

/* Portfolio Toolbar */
.portfolio-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.portfolio-toolbar .tbl-btn { padding:7px 14px; font-size:13px; border:none; border-radius:6px; cursor:pointer; font-weight:500; }
.portfolio-toolbar .primary-btn { background:var(--blue-700); color:#fff; }
.portfolio-toolbar .secondary-btn { background:#f1f5f9; color:var(--text-strong); border:1px solid var(--border); }

/* Asset Type Tabs */
.asset-type-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.asset-type-tab { padding:5px 12px; border-radius:20px; border:1px solid var(--border); font-size:12px; cursor:pointer; background:#fff; color:var(--text); transition:all .2s; }
.asset-type-tab.active { background:var(--blue-700); color:#fff; border-color:var(--blue-700); }

/* Holdings Table */
.holdings-table { width:100%; border-collapse:collapse; font-size:13px; }
.holdings-table th { background:#f8fafc; color:var(--text-muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.4px; padding:8px 10px; border-bottom:2px solid var(--border); text-align:right; }
.holdings-table th:first-child { text-align:left; }
.holdings-table td { padding:10px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.holdings-table tbody tr:hover { background:#f8fafc; }
.holdings-empty { text-align:center; padding:30px; color:var(--text-muted); font-style:italic; }
.qty-cell { font-weight:600; color:var(--text-strong); }
.holding-name { font-weight:600; color:var(--text-strong); }
.holding-symbol { font-size:11px; color:var(--text-muted); }
.text-right { text-align:right; }
.text-center { text-align:center; }
.positive { color:#059669; font-weight:600; }
.negative { color:#dc2626; font-weight:600; }

/* Asset Type Badges */
.asset-badge { display:inline-block; padding:2px 7px; border-radius:4px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
.asset-EQUITY       { background:#dbeafe; color:#1d4ed8; }
.asset-MUTUAL_FUND  { background:#ede9fe; color:#6d28d9; }
.asset-GOLD         { background:#fef3c7; color:#92400e; }
.asset-DEBT         { background:#d1fae5; color:#065f46; }
.asset-REAL_ESTATE  { background:#fee2e2; color:#991b1b; }
.asset-FD           { background:#cffafe; color:#164e63; }
.asset-PPF          { background:#ecfccb; color:#3f6212; }
.asset-NPS          { background:#f5d0fe; color:#701a75; }
.asset-OTHER        { background:#f1f5f9; color:#475569; }

/* Table action buttons */
.tbl-btn { padding:4px 10px; border-radius:5px; border:none; cursor:pointer; font-size:12px; font-weight:500; margin-right:4px; }
.edit-btn { background:#eff6ff; color:#2563eb; }
.del-btn  { background:#fef2f2; color:#dc2626; }

/* Holdings Modal */
.holding-modal-overlay, .goal-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000; align-items:center; justify-content:center; }
.holding-modal-box, .goal-modal-box { background:#fff; border-radius:12px; padding:28px; max-width:520px; width:90%; max-height:85vh; overflow-y:auto; position:relative; }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.modal-header h3 { font-size:18px; font-weight:700; color:var(--text-strong); }
.modal-close-btn { background:none; border:none; font-size:22px; cursor:pointer; color:var(--text-muted); }
.modal-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.modal-form-grid .full-width { grid-column:1/-1; }
.modal-label { font-size:12px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px; display:block; }
.modal-input { width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:6px; font-size:14px; color:var(--text-strong); background:#fff; }
.modal-input:focus { outline:none; border-color:var(--blue-700); }
.modal-footer { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.modal-save-btn { padding:9px 20px; background:var(--blue-700); color:#fff; border:none; border-radius:7px; font-weight:600; cursor:pointer; }
.modal-cancel-btn { padding:9px 16px; background:#f1f5f9; color:var(--text-strong); border:1px solid var(--border); border-radius:7px; cursor:pointer; }
.goal-advanced-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
}
.goal-advanced-toggle:hover { color: #374151; }

/* Goals Grid */
.goals-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.goals-empty { text-align:center; padding:40px; color:var(--text-muted); grid-column:1/-1; }
.goal-card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:20px; box-shadow:var(--shadow-sm); }
.goal-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
.goal-type-badge { padding:3px 8px; border-radius:5px; font-size:11px; font-weight:700; text-transform:uppercase; }
.goal-type-RETIREMENT { background:#dbeafe; color:#1d4ed8; }
.goal-type-EDUCATION  { background:#ede9fe; color:#6d28d9; }
.goal-type-HOUSE      { background:#d1fae5; color:#065f46; }
.goal-type-WEDDING    { background:#fce7f3; color:#9d174d; }
.goal-type-VEHICLE    { background:#fef3c7; color:#92400e; }
.goal-type-TRAVEL     { background:#cffafe; color:#164e63; }
.goal-type-OTHER      { background:#f1f5f9; color:#475569; }
.goal-actions { display:flex; gap:5px; }
.goal-name { font-size:16px; font-weight:700; color:var(--text-strong); margin-bottom:8px; }
.goal-meta { display:flex; justify-content:space-between; font-size:13px; color:var(--text); margin-bottom:4px; }
.simulate-goal-btn { width:100%; margin-top:14px; padding:8px; background:var(--blue-700); color:#fff; border:none; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; }
.simulate-goal-btn:disabled { opacity:.6; }
.goal-sim-result { margin-top:12px; }
.sim-result-box { background:#f8fafc; border:1px solid var(--border); border-radius:8px; padding:12px; }
.sim-prob { font-size:24px; font-weight:800; text-align:center; margin-bottom:8px; }
.sim-details { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--text); }
.sip-gap { color:#dc2626; font-weight:600; }
.sip-ok  { color:#059669; font-weight:600; }
.error-text { color:#dc2626; font-size:13px; }

/* Tax Planner */
.tax-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.tax-card { background:#fff; border:1px solid var(--border); border-radius:10px; padding:18px; box-shadow:var(--shadow-sm); }
.tax-card h4 { font-size:14px; font-weight:700; color:var(--text-strong); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.tax-row { display:flex; justify-content:space-between; font-size:13px; color:var(--text); padding:4px 0; }
.tax-row.total-row { font-weight:700; color:var(--text-strong); border-top:1px solid var(--border); margin-top:6px; padding-top:8px; }
.tax-row .label { color:var(--text-muted); }

/* 80C Tracker */
.c80-bar-wrap { margin:8px 0; }
.c80-bar { height:8px; border-radius:4px; background:#e2e8f0; overflow:hidden; }
.c80-fill { height:100%; border-radius:4px; transition:width .5s; }
.c80-labels { display:flex; justify-content:space-between; font-size:11px; color:var(--text-muted); margin-top:3px; }

/* Gain type badges */
.gain-type-badge { padding:2px 7px; border-radius:4px; font-size:10px; font-weight:700; }
.gain-type-badge.ltcg { background:#d1fae5; color:#065f46; }
.gain-type-badge.stcg { background:#fee2e2; color:#991b1b; }

/* FY Selector */
.fy-selector { display:flex; align-items:center; gap:10px; }
.fy-nav-btn { padding:4px 10px; border:1px solid var(--border); border-radius:5px; background:#fff; cursor:pointer; font-size:14px; }
.fy-label { font-size:15px; font-weight:700; color:var(--text-strong); min-width:120px; text-align:center; }

/* Insights */
.insights-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.insights-loading, .insights-error { text-align:center; padding:40px; color:var(--text-muted); grid-column:1/-1; }
.insight-card { background:#fff; border:1px solid var(--border); border-radius:10px; padding:16px; box-shadow:var(--shadow-sm); border-left:4px solid transparent; }
.insight-success { border-left-color:#059669; }
.insight-warning { border-left-color:#d97706; }
.insight-danger  { border-left-color:#dc2626; }
.insight-info    { border-left-color:#2563eb; }
.insight-header  { display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; }
.insight-icon    { font-size:20px; flex-shrink:0; }
.insight-category { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); }
.insight-title   { font-size:14px; font-weight:700; color:var(--text-strong); }
.insight-message { font-size:13px; color:var(--text); line-height:1.5; margin-bottom:8px; }
.insight-action  { font-size:12px; font-weight:600; color:var(--blue-700); }

/* Insights header */
.insights-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:8px; }
.insights-portfolio-val { font-size:13px; color:var(--text-muted); }
.insights-portfolio-val strong { color:var(--text-strong); font-size:16px; }
.refresh-insights-btn { padding:7px 14px; background:var(--blue-700); color:#fff; border:none; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; }

/* ── Portfolio Sync Banner ── */
.portfolio-sync-banner {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
  border-radius: 10px;
  margin-bottom: 16px;
  padding: 12px 18px;
}
.sync-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.sync-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #1e40af;
  font-size: 0.875rem;
}
.sync-banner-text strong { font-size: 0.925rem; }
.sync-banner-actions { display: flex; align-items: center; gap: 8px; }
.sync-sim-btn {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.sync-sim-btn:hover { background: #1d4ed8; }
.dismiss-sync-btn {
  background: none;
  border: 1px solid #93c5fd;
  color: #1e40af;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.dismiss-sync-btn:hover { background: #dbeafe; }

/* ── Sync Toast Notification ── */
.sync-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1e3a5f;
  color: #e0eeff;
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 280px;
  max-width: 340px;
  font-size: 0.875rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  z-index: 9999;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.sync-toast.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sync-toast strong { display: block; margin-bottom: 8px; font-size: 0.925rem; color: #fff; }
.sync-toast ul { margin: 0 0 8px 16px; padding: 0; }
.sync-toast ul li { margin-bottom: 3px; }
.sync-toast ul li b { color: #93c5fd; }
.sync-toast-hint { display: block; margin-top: 8px; font-size: 0.8rem; color: #94a3b8; font-style: normal; }
.sync-toast-hint em { color: #fbbf24; font-style: normal; font-weight: 600; }

/* ── Smart Advisor ── */
.sa-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 20px;
}
.sa-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sa-header-left { flex: 1; }
.sa-header-left h3 { font-size: 1rem; font-weight: 700; color: var(--text-strong); }
.sa-header-left p  { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.sa-score-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f8fafc;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 8px 16px;
  min-width: 80px;
}
.sa-score-badge #saHealthScore { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.sa-score-badge small { font-size: 0.72rem; font-weight: 600; margin-top: 1px; }
.sa-score-of { font-size: 0.7rem; color: #9ca3af; }
.sa-refresh-btn {
  align-self: flex-start;
  background: var(--blue-700);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.sa-refresh-btn:hover { opacity: 0.88; }

.sa-alloc-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f0f7ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.82rem;
  color: #1e40af;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.sa-alloc-strip b { color: #1e3a5f; }
.sa-alloc-sep { color: #93c5fd; }
.sa-alloc-ideal { margin-left: auto; font-weight: 600; }

.sa-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.sa-card {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.sa-card-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.sa-item {
  border-radius: 7px;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 0.8rem;
}
.sa-item:last-child { margin-bottom: 0; }
.sa-item-ok     { background: #f0fdf4; border-left: 3px solid #059669; }
.sa-item-warn   { background: #fffbeb; border-left: 3px solid #d97706; }
.sa-item-danger { background: #fef2f2; border-left: 3px solid #dc2626; }
.sa-item-info   { background: #eff6ff; border-left: 3px solid #2563eb; }
.sa-item-title  { font-weight: 700; color: var(--text-strong); margin-bottom: 2px; }
.sa-item-meta   { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 3px; }
.sa-item-detail { color: var(--text); margin-bottom: 4px; }
.sa-item-action { font-size: 0.78rem; color: #2563eb; font-weight: 600; }
.sa-loading, .sa-empty { font-size: 0.8rem; color: var(--text-muted); padding: 8px 0; }

.sa-sip-stat {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.sa-sip-stat span { color: var(--text-muted); }
.sa-sip-stat b { color: var(--text-strong); }
.sa-sip-gap-badge {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 0.78rem;
  font-weight: 700;
  margin: 4px 0 6px;
}

/* ── Smart Advisor: wide card (spans 2 columns) ── */
.sa-card-wide { grid-column: 1 / -1; }

/* ── SIP Optimizer ── */
.sa-sip-opt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.sa-sip-opt-label { font-size: 0.82rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.sa-sip-opt-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  padding: 0 10px;
  flex: 1;
  min-width: 140px;
  max-width: 220px;
}
.sa-rupee { font-weight: 700; color: var(--text-muted); margin-right: 4px; }
.sa-sip-opt-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.9rem;
  padding: 6px 0;
  width: 100%;
  color: var(--text-strong);
}
.sip-opt-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 0.8rem;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 6px;
}
.sip-opt-ok   { background: #f0fdf4; border-left: 3px solid #059669; color: #166534; }
.sip-opt-warn { background: #fffbeb; border-left: 3px solid #d97706; color: #92400e; }
.sip-opt-info { background: #eff6ff; border-left: 3px solid #2563eb; color: #1e40af; }
.sip-opt-table-wrap { overflow-x: auto; }
.sip-opt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.sip-opt-table th {
  background: #f1f5f9;
  text-align: left;
  padding: 6px 10px;
  font-weight: 700;
  color: var(--text-strong);
  border-bottom: 1px solid var(--border);
}
.sip-opt-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.sip-opt-table tbody tr:last-child td { border-bottom: none; }
.sip-opt-row-warn td { background: #fffbeb; }
.sip-opt-center { text-align: center; }
.sip-opt-right  { text-align: right; }

/* ── Tax Harvesting ── */
.th-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 10px 0 6px;
}
.th-section-title:first-child { margin-top: 0; }

/* ── Bucket-to-Holdings Mapping ── */
#bucketMappingSection { margin-top: 4px; }
.bm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.bm-subtitle { font-size: 0.82rem; color: var(--text-muted); }
.bm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.bm-bucket {
  border: 1.5px solid var(--bm-color, var(--border));
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bm-loading-bucket { border-color: var(--border); }
.bm-bucket-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.bm-bucket-title { display: flex; align-items: flex-start; gap: 10px; }
.bm-bucket-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--bm-color, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.bm-bucket-name { font-size: 0.85rem; font-weight: 700; color: var(--text-strong); }
.bm-bucket-horizon { font-size: 0.72rem; color: var(--text-muted); margin-top: 1px; }
.bm-bucket-total { font-size: 1rem; font-weight: 800; color: var(--bm-color, var(--text-strong)); white-space: nowrap; }
.bm-holdings {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.bm-holding-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  padding: 4px 8px;
  background: #f8fafc;
  border-radius: 5px;
}
.bm-holding-name { flex: 1; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-holding-type {
  font-size: 0.68rem;
  background: #eff6ff;
  color: var(--bm-color, #2563eb);
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 600;
  white-space: nowrap;
}
.bm-holding-val { font-weight: 700; color: var(--text-strong); white-space: nowrap; }
.bm-no-holdings { font-size: 0.78rem; color: var(--text-muted); font-style: italic; padding: 6px 0; }
.bm-metrics { display: flex; flex-direction: column; gap: 6px; }
.bm-stat { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; }
.bm-stat span { color: var(--text-muted); }
.bm-val-ok   { color: #059669; font-weight: 700; }
.bm-val-warn { color: #d97706; font-weight: 700; }
.bm-gap-badge {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 700;
}
.bm-suggestion {
  font-size: 0.78rem;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 500;
}
.bm-status-ok   { background: #f0fdf4; color: #166534; border-left: 3px solid #059669; }
.bm-status-warn { background: #fffbeb; color: #92400e; border-left: 3px solid #d97706; }
.bm-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
}
.bm-summary-banner {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border: 1.5px solid #bfdbfe;
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 4px;
}
.bm-summary-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 120px;
}
.bm-summary-item span { font-size: 0.72rem; color: #6b7280; }
.bm-summary-item strong { font-size: 0.95rem; font-weight: 800; color: var(--text-strong); }
.bm-sip-pill {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 3px 10px;
  border-radius: 999px;
}
.bm-fund-examples {
  font-size: 0.74rem;
  color: #6b7280;
  background: #f9fafb;
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 4px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.bm-fund-examples i { color: #3b82f6; flex-shrink: 0; margin-top: 2px; }
/* ── Surplus Investment Section ── */
.surplus-section {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.surplus-section-header {
  font-size: 0.88rem;
  color: var(--text-strong);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.surplus-section-header i { color: #059669; }
.surplus-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.surplus-card {
  border: 1.5px solid var(--surplus-color, var(--border));
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
}
.surplus-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.surplus-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surplus-color, #2563eb) 12%, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--surplus-color, #2563eb);
  font-size: 0.9rem;
}
.surplus-card-title { font-size: 0.82rem; font-weight: 700; color: var(--text-strong); }
.surplus-card-return { font-size: 0.72rem; color: #6b7280; }
.surplus-card-amount {
  margin-left: auto;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--surplus-color, #2563eb);
  white-space: nowrap;
}
.surplus-card-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; }
.surplus-card-where {
  font-size: 0.73rem;
  color: #6b7280;
  background: #f9fafb;
  border-radius: 5px;
  padding: 5px 8px;
  display: flex;
  gap: 5px;
  align-items: flex-start;
}
.surplus-card-where i { color: #3b82f6; flex-shrink: 0; margin-top: 2px; }
.surplus-deficit-bar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff7ed;
  border: 1.5px solid #f97316;
  border-radius: 10px;
  padding: 14px 16px;
  color: #9a3412;
}
.surplus-deficit-bar i { color: #f97316; font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.surplus-deficit-bar strong { font-size: 0.88rem; display: block; margin-bottom: 4px; }
.surplus-deficit-bar p { font-size: 0.8rem; color: #c2410c; margin: 0; }
.bm-summary-divider { width: 1px; background: var(--border); align-self: stretch; margin: 0 4px; }
.bm-surplus-ok   { color: #059669 !important; }
.bm-surplus-warn { color: #dc2626 !important; }
@media (max-width: 768px) {
  .surplus-cards { grid-template-columns: 1fr; }
}

.strategy-section {
  margin-top: 24px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.strategy-toggle-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-strong);
  transition: background 0.15s;
}
.strategy-toggle-btn:hover { background: #f1f5f9; }
.strategy-toggle-btn i.fa-sliders { color: #2563eb; margin-right: 2px; }

/* ── XIRR vs Benchmark ── */
.xirr-card {
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
  border: 1.5px solid #bfdbfe;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.xirr-card-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.xirr-title { font-size: 0.88rem; font-weight: 700; color: #1e40af; }
.xirr-sub   { font-size: 0.75rem; color: #6b7280; }
.xirr-grid {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.xirr-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 8px 16px;
  min-width: 100px;
}
.xirr-label { font-size: 0.7rem; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.xirr-val   { font-size: 1.2rem; font-weight: 800; color: #1e293b; }
.xirr-vs    { font-size: 0.75rem; font-weight: 700; color: #6b7280; }
.xirr-verdict { font-size: 0.82rem; font-weight: 600; color: #374151; }

@media (max-width: 768px) {
  .nw-summary { grid-template-columns: 1fr 1fr; }
  .tax-grid { grid-template-columns: 1fr; }
  .modal-form-grid { grid-template-columns: 1fr; }
  .goals-grid { grid-template-columns: 1fr; }
  .insights-grid { grid-template-columns: 1fr; }
  .sa-grid { grid-template-columns: 1fr; }
  .bm-grid { grid-template-columns: 1fr; }
  .xirr-grid { gap: 10px; }
  .sip-opt-row { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════
   DIRECTION B: PREMIUM WEALTH MANAGEMENT
   Additional overrides & enhancements
   ═══════════════════════════════════════ */

/* Improved card hover effect */
.card:hover { box-shadow: var(--shadow-md); transition: box-shadow 0.2s ease; }

/* Teal primary buttons (any generic blue button override) */
.tbl-btn.primary-btn, button.primary-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}
.tbl-btn.primary-btn:hover, button.primary-btn:hover {
  background: #0a5c56;
}

/* Holdings table redesign */
.holdings-table th {
  background: var(--charcoal) !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 12px 14px !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
}
.holdings-table tbody tr:hover { background: #f0fdf9 !important; }
.holdings-table tbody td { border-bottom: 1px solid #f1f5f9; }

/* Asset type badges */
.holding-type-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* Gain/loss colored values */
.gain-positive { color: var(--success-color); font-weight: 600; }
.gain-negative { color: var(--error-color); font-weight: 600; }

/* Net worth / XIRR card */
.nw-summary { border-left: 4px solid var(--primary); }
.xirr-card { border-left: 4px solid var(--gold); }

/* SA cards left accent */
.sa-card { border-left: 3px solid var(--primary-light); }
.sa-card-wide { border-left: 3px solid var(--gold); }

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* Footer */
.app-footer {
  background: #f8fafc !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
  color: var(--text-muted) !important;
}

/* Goal cards in right rail — removed (expense rows now in left column) */

/* Popup buttons */
.popup-action-btn {
  background: linear-gradient(135deg, var(--gold), var(--gold-light)) !important;
  box-shadow: 0 4px 14px rgba(217,119,6,.3) !important;
}

/* Right rail goals card label */
.goals-card .right-title { border-bottom: 1px solid rgba(255,255,255,0.15) !important; }

/* Loading spinner teal */
.loading-spinner { border-top-color: var(--primary) !important; }

/* Carousel dots */
.carousel-dot.active { background: var(--primary) !important; }

/* Tab active indicator enhanced */
.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary-light);
  border-radius: 2px 2px 0 0;
}

/* Value pill inputs */
.value-pill input { border-color: var(--border) !important; color: var(--text-strong) !important; }

/* Input focus states - teal instead of blue */
.text-input:focus, input:focus, select:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(15,118,110,0.15) !important;
}

/* ═══════════════════════════════════════
   TERMS DROPDOWN NAV
   ═══════════════════════════════════════ */
.tab-btn--hidden { display: none !important; }

.tab-dropdown { position: relative; display: inline-flex; align-items: center; }

.tab-dropdown-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.tab-dropdown-trigger .chevron {
  transition: transform 0.2s ease;
  opacity: 0.6;
}
.tab-dropdown.open .tab-dropdown-trigger .chevron { transform: rotate(180deg); opacity: 1; }
.tab-dropdown.open .tab-dropdown-trigger { color: #fff !important; }
.tab-dropdown.open .tab-dropdown-trigger,
.tab-dropdown.terms-active .tab-dropdown-trigger {
  border-bottom-color: var(--primary-light) !important;
  color: #fff !important;
}

.tab-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a2844;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 8px;
  min-width: 220px;
  z-index: 200;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.tab-dropdown.open .tab-dropdown-menu { display: block; animation: dropFade 0.15s ease; }

@keyframes dropFade {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.tab-dropdown-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  padding: 4px 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 6px;
}

.tab-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
  text-align: left;
}
.tab-dropdown-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.tab-dropdown-item.active {
  background: rgba(20,184,166,0.15);
  color: var(--primary-light);
  font-weight: 600;
}

.term-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.term-dot--1 { background: var(--primary-light); }
.term-dot--2 { background: #0891b2; }
.term-dot--3 { background: var(--gold); }

.term-badge {
  margin-left: auto;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  font-weight: 400;
}
.tab-dropdown-item.active .term-badge { color: rgba(20,184,166,0.6); }

/* Section description text */
.section-description { color: var(--text-muted); font-size: 14px; margin-top: 2px; }

/* Goals tab buttons */
#addGoalBtn { background: var(--primary) !important; color: #fff !important; border: none; border-radius: 8px; }

/* Holdings table tbl-btn */
.tbl-btn { border-radius: 6px !important; font-size: 13px !important; padding: 5px 10px !important; }

/* Actions column — stacked neat buttons */
.action-cell { white-space: nowrap; }
.action-cell .action-btn {
    display: block;
    width: 90px;
    margin: 3px auto !important;
    text-align: center;
    font-size: 12px !important;
    padding: 4px 0 !important;
    border-radius: 5px !important;
}
.txn-btn { background: #f5f3ff; color: #7c3aed !important; }

/* Age link color */
.age-link { color: var(--gold) !important; }

/* Pagination */
#historyPaginationContainer button { border-color: var(--primary); color: var(--primary); }
#historyPaginationContainer button.active { background: var(--primary); color: #fff; }

/* Load btn color */
#historyTableBody .load-btn { background: var(--primary) !important; }

/* Smart advisor refresh btn */
.sa-refresh-btn {
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
}

/* Bucket mapping cards */
.bm-bucket { border-radius: 16px !important; }

/* Duration note */
.duration-note { border-left-color: var(--primary) !important; color: #065f46 !important; background: #f0fdf9 !important; }

/* ============================================================
   PORTFOLIO EMPTY STATE
   ============================================================ */
.portfolio-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  text-align: center;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  margin: 8px 0;
}
.pes-icon {
  font-size: 52px;
  color: var(--primary-light);
  opacity: 0.5;
  margin-bottom: 16px;
}
.portfolio-empty-state h4 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 10px;
}
.portfolio-empty-state p {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 380px;
  line-height: 1.7;
  margin-bottom: 24px;
}
.pes-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.pes-btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pes-btn-primary:hover { background: #0d6460; transform: translateY(-1px); }
.pes-btn-secondary {
  background: #fff;
  color: var(--text-strong);
  border: 1.5px solid var(--border);
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pes-btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.pes-tip {
  font-size: 13px;
  color: var(--text-muted);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pes-tip i { color: var(--primary); }
.pes-tip a { color: var(--primary); font-weight: 600; text-decoration: none; }
.pes-tip a:hover { text-decoration: underline; }

/* ============================================================
   NEW USER INVESTMENT GUIDE
   ============================================================ */
.nug-container { padding: 8px 0; }

.nug-hero {
  text-align: center;
  padding: 32px 24px 24px;
  background: linear-gradient(135deg, #0f1724 0%, #1e293b 100%);
  border-radius: 16px;
  color: #fff;
  margin-bottom: 24px;
}
.nug-hero-icon {
  font-size: 36px;
  color: var(--primary-light);
  margin-bottom: 12px;
}
.nug-hero-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.3;
}
.nug-hero-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  margin: 0;
}

.nug-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .nug-cards { grid-template-columns: 1fr; }
}

.nug-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.nug-card:hover {
  box-shadow: 0 8px 24px rgba(15,23,42,0.1);
  transform: translateY(-2px);
}

.nug-card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.nug-icon-equity { background: #ecfdf5; color: #059669; }
.nug-icon-safe   { background: #eff6ff; color: #2563eb; }
.nug-icon-ppf    { background: #faf5ff; color: #7c3aed; }
.nug-icon-gold   { background: #fffbeb; color: #d97706; }

.nug-card-body h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 4px;
}
.nug-card-body p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.nug-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.nug-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}
.nug-badge-return { background: #ecfdf5; color: #059669; }
.nug-badge-alloc  { background: #f1f5f9; color: #475569; }

.nug-action-btn {
  margin-top: auto;
  background: transparent;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-start;
}
.nug-action-btn:hover {
  background: var(--primary);
  color: #fff;
}

.nug-tip {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #92400e;
  flex-wrap: wrap;
}
.nug-tip i { color: #d97706; font-size: 16px; flex-shrink: 0; }
.nug-tip span { flex: 1; min-width: 200px; }
.nug-sim-btn {
  background: var(--gold);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.nug-sim-btn:hover { background: #b45309; }

/* ============================================================
   IMPROVED KPI / STAT CARDS
   ============================================================ */
.stat {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15,23,42,0.1) !important;
}
.stat-val {
  font-size: 26px !important;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}
.empty-state-icon {
  font-size: 44px;
  margin-bottom: 16px;
  opacity: 0.35;
  color: var(--text-muted);
}
.empty-state h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 8px;
}
.empty-state p {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 320px;
  line-height: 1.6;
}

/* ============================================================
   TABLE ENHANCEMENTS
   ============================================================ */
.yearly-table tbody tr:nth-child(even) { background: #f8fafc; }
.yearly-table tbody tr:hover { background: #f0fdf9; transition: background 0.15s; }

/* ============================================================
   BUTTON MICRO-INTERACTIONS
   ============================================================ */
.cta-btn {
  transition: all 0.2s ease !important;
  transform: translateY(0) !important;
}
.cta-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(217,119,6,0.35) !important;
}
.cta-btn:active {
  transform: translateY(0) !important;
}

/* ─────────────────────────────────────────
   CASH FLOW TAB
───────────────────────────────────────── */
.cf-summary-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.cf-summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 140px;
}
.cf-summary-item--net {
  background: #fff;
  border: 2px solid var(--primary);
  border-radius: 10px;
  padding: 10px 16px;
}
.cf-summary-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.cf-summary-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-strong);
}
.cf-summary-value.cf-positive { color: #16a34a; }
.cf-summary-value.cf-net      { color: var(--primary); }
.cf-summary-sep {
  font-size: 22px;
  font-weight: 700;
  color: #94a3b8;
  flex: 0;
  padding: 0 4px;
}

.cf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) {
  .cf-grid { grid-template-columns: 1fr; }
}

.cf-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.cf-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
}
.cf-panel-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cf-add-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.cf-add-btn:hover { opacity: .85; }

.cf-panel-body { overflow-x: auto; }

.cf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cf-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .4px;
  border-bottom: 1px solid var(--border);
  background: #fafafa;
}
.cf-table th.text-right { text-align: right; }
.cf-table td {
  padding: 10px 10px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: var(--text);
}
.cf-table td.text-right { text-align: right; }
.cf-table tr:last-child td { border-bottom: none; }
.cf-table tr:hover td { background: #f8fafc; }

.cf-empty {
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  padding: 24px !important;
}

.cf-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: #d1fae5;
  color: #065f46;
  white-space: nowrap;
}
.cf-type-badge--exp {
  background: #fee2e2;
  color: #991b1b;
}

.cf-panel-total {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: #64748b;
  background: #fafafa;
  text-align: right;
}
.cf-panel-total strong {
  color: var(--text-strong);
  font-size: 15px;
}

/* ─────────────────────────────────────────
   REBALANCING TAB
───────────────────────────────────────── */
.rb-target-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 24px;
}
.rb-target-header {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rb-target-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.rb-target-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rb-target-label {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rb-cat-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rb-target-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--input-bg, #fff);
  color: var(--text-strong);
  box-sizing: border-box;
}
.rb-target-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.rb-total-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: #64748b;
}
.rb-total-value {
  font-size: 18px;
  font-weight: 700;
  color: #dc2626;
}
.rb-threshold-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 13px;
  color: #64748b;
}
.rb-threshold-row input {
  width: 70px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--input-bg, #fff);
}
.rb-save-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.rb-save-msg {
  display: none;
  font-size: 13px;
  color: #16a34a;
  font-weight: 500;
}
.rb-analysis-area,
.rb-analysis-grid {
  display: none;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
  .rb-analysis-area,
  .rb-analysis-grid { grid-template-columns: 1fr; }
}
.rb-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.rb-panel-header {
  padding: 14px 18px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rb-total-badge {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
}
.rb-drift-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.rb-drift-table th {
  padding: 9px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
}
.rb-drift-table th.text-right,
.rb-drift-table td.text-right { text-align: right; }
.rb-drift-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.rb-drift-table tr:last-child td { border-bottom: none; }
.rb-drift-table td:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.rb-status {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
}
.rb-ok    { background: #dcfce7; color: #166534; }
.rb-over  { background: #fee2e2; color: #991b1b; }
.rb-under { background: #dbeafe; color: #1e40af; }
.rb-suggestions-body {
  padding: 16px;
  min-height: 80px;
}
.rb-all-ok {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.rb-suggestion-group {
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.rb-reduce  { background: #fff7ed; border: 1px solid #fed7aa; }
.rb-increase { background: #eff6ff; border: 1px solid #bfdbfe; }
.rb-suggestion-header {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
}
.rb-reduce   .rb-suggestion-header { color: #c2410c; }
.rb-increase .rb-suggestion-header { color: #1d4ed8; }
.rb-suggestion-cat {
  font-size: 13px;
  color: var(--text-strong);
  margin-top: 8px;
  margin-bottom: 4px;
}
.rb-suggestion-item {
  font-size: 12px;
  color: #475569;
  padding-left: 6px;
  line-height: 1.6;
}
.rb-suggestion-amt {
  font-weight: 600;
  color: #dc2626;
}
.rb-refresh-btn {
  padding: 4px 10px;
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  color: #64748b;
}
.rb-refresh-btn:hover { background: #f1f5f9; }

/* ============================================================
   CASH FLOW TAB — Enhanced (3-column, debts, toggles)
   ============================================================ */

/* 3-column panel grid */
.cf-grid--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .cf-grid--3 { grid-template-columns: 1fr; }
}

/* Extended 4-item summary bar */
.cf-summary-bar--extended {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}
.cf-summary-bar--extended .cf-summary-item {
  padding: 14px 18px;
  border-right: 1px solid var(--border);
  text-align: center;
}
.cf-summary-bar--extended .cf-summary-item:last-child { border-right: none; }
.cf-summary-bar--extended .cf-summary-label {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.cf-summary-bar--extended .cf-summary-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong, #1e293b);
}
.cf-summary-sub {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}
@media (max-width: 700px) {
  .cf-summary-bar--extended { grid-template-columns: repeat(2, 1fr); }
  .cf-summary-bar--extended .cf-summary-item { border-right: none; border-bottom: 1px solid var(--border); }
}

/* Toggle button group */
.cf-toggle-group {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.cf-toggle-btn {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  background: #f8fafc;
  border: none;
  cursor: pointer;
  color: #64748b;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.cf-toggle-btn + .cf-toggle-btn { border-left: 1px solid var(--border); }
.cf-toggle-btn.active,
.cf-toggle-btn.active.cf-toggle-btn--green { background: #16a34a; color: #fff; }
.cf-toggle-btn.active.cf-toggle-btn--red   { background: #dc2626; color: #fff; }
.cf-toggle-btn:not(.active):hover { background: #e2e8f0; }
.cf-toggle-hint {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 4px;
  font-style: italic;
}

/* Person type badges */
.cf-person-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
}
.cf-person-badge.cf-salaried   { background: #dbeafe; color: #1d4ed8; }
.cf-person-badge.cf-self       { background: #fef3c7; color: #92400e; }

/* Expense type badges */
.cf-exp-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
}
.cf-exp-badge.cf-returnable     { background: #d1fae5; color: #065f46; }
.cf-exp-badge.cf-non-returnable { background: #fee2e2; color: #991b1b; }

/* Generic type badge (debt types) */
.cf-type-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  background: #e2e8f0;
  color: #475569;
  font-weight: 500;
}

/* Panel total sub-label */
.cf-panel-outstanding {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

/* ============================================================
   SELF-EMPLOYED AVERAGE INCOME CALCULATOR
   ============================================================ */
#selfEmpAvgHelper {
  margin-top: 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 12px 14px;
}
.cf-avg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}
.cf-avg-title {
  font-size: 12px;
  font-weight: 600;
  color: #1d4ed8;
}
.cf-avg-toggle {
  display: inline-flex;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  overflow: hidden;
}
.cf-avg-period-btn {
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 600;
  background: #fff;
  border: none;
  cursor: pointer;
  color: #3b82f6;
  transition: background .15s, color .15s;
}
.cf-avg-period-btn + .cf-avg-period-btn { border-left: 1px solid #93c5fd; }
.cf-avg-period-btn.active { background: #2563eb; color: #fff; }
.cf-avg-period-btn:not(.active):hover { background: #dbeafe; }

.cf-avg-month-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.cf-avg-month-label {
  flex: 0 0 130px;
  font-size: 12px;
  color: #1e40af;
  font-weight: 500;
}
.cf-avg-month-input {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  outline: none;
}
.cf-avg-month-input:focus { border-color: #2563eb; }

.cf-avg-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 8px;
}
.cf-avg-result {
  font-size: 12px;
  color: #1d4ed8;
  font-weight: 600;
}
.cf-avg-btn {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
}
.cf-avg-btn:hover { background: #1d4ed8; }

/* ============================================================
   CASH FLOW — KPI BAR (replaces old summary bar)
   ============================================================ */
.cf-kpi-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 900px) { .cf-kpi-bar { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .cf-kpi-bar { grid-template-columns: 1fr; } }

.cf-kpi-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.cf-kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.cf-kpi-body { display: flex; flex-direction: column; gap: 2px; }
.cf-kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #64748b;
}
.cf-kpi-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}
.cf-kpi-sub { font-size: 11px; color: #94a3b8; margin-top: 1px; }

/* Card colour themes */
.cf-kpi-income { background: #f0fdf4; border-color: #bbf7d0; }
.cf-kpi-income .cf-kpi-icon { background: #dcfce7; color: #16a34a; }
.cf-kpi-income .cf-kpi-value { color: #15803d; }
.cf-kpi-income .cf-kpi-sub  { color: #4ade80; }

.cf-kpi-expense { background: #fff7ed; border-color: #fed7aa; }
.cf-kpi-expense .cf-kpi-icon { background: #ffedd5; color: #ea580c; }
.cf-kpi-expense .cf-kpi-value { color: #c2410c; }

.cf-kpi-emi { background: #fffbeb; border-color: #fde68a; }
.cf-kpi-emi .cf-kpi-icon { background: #fef3c7; color: #d97706; }
.cf-kpi-emi .cf-kpi-value { color: #b45309; }

.cf-kpi-net { background: #eff6ff; border-color: #bfdbfe; }
.cf-kpi-net .cf-kpi-icon { background: #dbeafe; color: #2563eb; }
.cf-kpi-net .cf-kpi-value { color: #1d4ed8; }

/* ============================================================
   CASH FLOW — PANEL CARDS
   ============================================================ */
.cf-panel {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cf-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: #f8fafc;
}
.cf-panel-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong, #1e293b);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cf-add-btn {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  background: #1e293b;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
}
.cf-add-btn:hover { background: #334155; }
.cf-panel-body { flex: 1; overflow-x: auto; }
.cf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cf-table th {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #94a3b8;
  border-bottom: 1px solid #f1f5f9;
  white-space: nowrap;
}
.cf-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f8fafc;
  vertical-align: middle;
}
.cf-table tr:last-child td { border-bottom: none; }
.cf-table tr:hover td { background: #f8fafc; }
.cf-empty {
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  padding: 24px 12px !important;
}
.cf-panel-total {
  padding: 10px 14px;
  font-size: 13px;
  color: #475569;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
  text-align: right;
}
.cf-panel-total strong { color: #1e293b; }
.tbl-btn {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 5px;
  border: 1px solid;
  cursor: pointer;
  margin-left: 4px;
}
.edit-btn { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
.edit-btn:hover { background: #dbeafe; }
.del-btn  { background: #fff5f5; color: #dc2626; border-color: #fecaca; }
.del-btn:hover { background: #fee2e2; }
.action-cell { white-space: nowrap; }
.text-right { text-align: right; }

/* ============================================================
   INCOME MODAL — section separator
   ============================================================ */
.cf-modal-section {
  padding: 16px 20px 14px;
  border-bottom: 1px solid #f1f5f9;
  background: #f8fafc;
}
.cf-modal-section .modal-label { display: block; margin-bottom: 8px; }