/* =========================================================
   SHARED STYLES — personal finance dashboard
   ========================================================= */
:root {
  --bg: #07070f; --surface: #0d0d1c; --card: #11112a; --card2: #15153a;
  --border: #1e1e42; --border2: #2a2a55;
  --gold: #c9a96e; --gold2: #e8c97a; --gold-dim: rgba(201,169,110,0.12);
  --green: #34d399; --green-dim: rgba(52,211,153,0.1);
  --red: #f87171; --red-dim: rgba(248,113,113,0.1);
  --yellow: #fbbf24; --yellow-dim: rgba(251,191,36,0.1);
  --blue: #60a5fa; --blue-dim: rgba(96,165,250,0.1);
  --purple: #a78bfa; --purple-dim: rgba(167,139,250,0.1);
  --text: #e2e2f0; --muted: #6b6b9a; --muted2: #4a4a72;
  --font: 'Syne', sans-serif; --mono: 'JetBrains Mono', monospace;
  --radius: 8px; --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --nav-w: 220px;
  /* Design tokens */
  --text-xs:10px; --text-sm:12px; --text-base:14px; --text-lg:16px;
  --text-xl:20px; --text-2xl:24px; --text-3xl:32px;
  --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;
  --ease:cubic-bezier(0.4,0,0.2,1); --transition:0.2s cubic-bezier(0.4,0,0.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;min-height:100vh;line-height:1.5;display:flex;}

/* NAV */
#sidenav{width:var(--nav-w);min-height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;}
.nav-logo{padding:20px 18px 16px;border-bottom:1px solid var(--border);}
.nav-logo-title{font-size:14px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);}
.nav-logo-sub{font-size:var(--text-xs);color:var(--muted);margin-top:2px;letter-spacing:0.05em;}
.nav-links{padding:12px 0;flex:1;}
.nav-section-label{font-size:var(--text-xs);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted2);padding:10px 18px 4px;}
.nav-link{display:flex;align-items:center;gap:10px;padding:9px 18px;font-size:var(--text-sm);font-weight:500;color:var(--muted);text-decoration:none;transition:all 0.15s;border-left:2px solid transparent;letter-spacing:0.02em;}
.nav-link:hover{color:var(--text);background:rgba(255,255,255,0.03);}
.nav-link.active{color:var(--gold);border-left-color:var(--gold);background:var(--gold-dim);}
.nav-link .nav-icon{font-size:14px;width:18px;text-align:center;flex-shrink:0;}
.nav-link:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:4px;}
.nav-footer{padding:12px 18px;border-top:1px solid var(--border);font-size:var(--text-xs);color:var(--muted2);}
#nav-nw{font-family:var(--mono);font-size:11px;color:var(--green);font-weight:600;}

/* MAIN */
#main{flex:1;overflow:auto;min-width:0;}
.page-header{padding:20px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.page-title{font-size:18px;font-weight:700;letter-spacing:0.04em;}
.page-sub{font-size:var(--text-sm);color:var(--muted);flex:1;}
.page-body{padding:20px 24px;}

/* CARDS */
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:20px;}
.metric-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;position:relative;overflow:hidden;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);}
.metric-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.3);border-color:var(--border2);}
.metric-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
.mc-gold::before{background:var(--gold)}.mc-green::before{background:var(--green)}.mc-red::before{background:var(--red)}.mc-blue::before{background:var(--blue)}.mc-purple::before{background:var(--purple)}.mc-yellow::before{background:var(--yellow)}
.metric-label{font-size:var(--text-xs);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.metric-value{font-family:var(--mono);font-size:var(--text-xl);font-weight:600;color:var(--text);line-height:1.2;}
.metric-value--lg{font-size:var(--text-2xl);}
.metric-value.pos{color:var(--green)}.metric-value.neg{color:var(--red)}
.metric-sub{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted);margin-top:3px;}

/* SECTION */
.section{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:20px;transition:border-color var(--transition);}
.section:hover{border-color:var(--border2);}
.section-header{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--border);background:rgba(255,255,255,0.01);}
.section-title{font-size:var(--text-sm);font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--text);flex:1;}
.section-body{padding:18px;}

/* TABLE */
.data-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);}
.data-table th{font-size:var(--text-xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted2);padding:7px 10px;text-align:left;border-bottom:1px solid var(--border);}
.data-table th.r{text-align:right}.data-table td.r{text-align:right}
.data-table td{padding:9px 10px;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:var(--text-sm);vertical-align:middle;}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover{background:rgba(255,255,255,0.02)}
.data-table tr.total-row td{font-weight:700;color:var(--text);border-top:1px solid var(--border2);background:rgba(255,255,255,0.02);}
th.sortable{cursor:pointer;user-select:none;}th.sortable:hover{color:var(--gold);}
.sort-icon{font-size:var(--text-xs);margin-left:4px;opacity:0.25;transition:opacity 0.15s;vertical-align:middle;}
th.sortable:hover .sort-icon{opacity:0.5;}.sort-icon.active{opacity:1!important;color:var(--gold);}

/* FORM */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.form-group{display:flex;flex-direction:column;gap:5px;}
.form-label{font-size:var(--text-xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);}
.form-input{background:var(--card);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-family:var(--mono);font-size:13px;padding:9px 11px;outline:none;transition:border-color 0.2s,box-shadow 0.2s;width:100%;}
.form-input:focus{border-color:var(--gold);}
.form-input:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-dim);}
.form-select{appearance:none;cursor:pointer;}
.form-hint{font-size:var(--text-xs);color:var(--muted);}

/* BUTTONS */
.btn{background:var(--gold-dim);border:1px solid var(--gold);color:var(--gold);padding:7px 16px;border-radius:6px;font-family:var(--font);font-size:var(--text-sm);font-weight:600;letter-spacing:0.05em;cursor:pointer;transition:all 0.2s;}
.btn:hover{background:var(--gold);color:#000;}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.btn:disabled,.btn[disabled]{opacity:0.4;cursor:not-allowed;pointer-events:none;}
.btn-sm{padding:4px 11px;font-size:11px;}
.btn-ghost{background:transparent;border:1px solid var(--border2);color:var(--muted);}
.btn-ghost:hover{border-color:var(--text);color:var(--text);background:rgba(255,255,255,0.04);}
.btn-danger{background:var(--red-dim);border-color:var(--red);color:var(--red);}
.btn-danger:hover{background:var(--red);color:#fff;}
.btn-icon{width:28px;height:28px;padding:0;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;}

/* BADGES */
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:var(--text-xs);font-weight:600;letter-spacing:0.06em;}
.badge-green{background:var(--green-dim);color:var(--green);border:1px solid rgba(52,211,153,0.25);}
.badge-red{background:var(--red-dim);color:var(--red);border:1px solid rgba(248,113,113,0.25);}
.badge-yellow{background:var(--yellow-dim);color:var(--yellow);border:1px solid rgba(251,191,36,0.25);}
.badge-blue{background:var(--blue-dim);color:var(--blue);border:1px solid rgba(96,165,250,0.25);}
.badge-gold{background:var(--gold-dim);color:var(--gold);border:1px solid rgba(201,169,110,0.25);}
.badge-purple{background:var(--purple-dim);color:var(--purple);border:1px solid rgba(167,139,250,0.25);}

/* UTILS */
.pos{color:var(--green)}.neg{color:var(--red)}.muted{color:var(--muted)}.gold{color:var(--gold)}
.mono{font-family:var(--mono)}
.flex{display:flex;align-items:center;gap:10px}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.w-full{width:100%}
.divider{height:1px;background:var(--border);margin:16px 0;}

/* MODAL */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity 0.2s;}
.modal-overlay.open{opacity:1;pointer-events:auto;}
.modal{background:var(--card);border:1px solid var(--border2);border-radius:12px;width:460px;max-width:calc(100vw - 32px);box-shadow:var(--shadow);transform:translateY(10px);transition:transform 0.2s;max-height:90vh;overflow-y:auto;}
.modal-overlay.open .modal{transform:translateY(0);}
.modal-header{padding:18px 22px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.modal-title{font-size:14px;font-weight:700;color:var(--gold);}
.modal-close{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;line-height:1;transition:color 0.15s;}
.modal-close:hover{color:var(--text);}
.modal-body{padding:18px 22px;display:flex;flex-direction:column;gap:14px;}
.modal-footer{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;}

/* TOAST */
.toast{position:fixed;bottom:24px;left:50%;z-index:300;background:var(--card2);border:1px solid var(--border2);border-radius:10px;padding:12px 20px;font-size:13px;color:var(--text);box-shadow:0 8px 32px rgba(0,0,0,0.5);transform:translateX(-50%) translateY(16px);opacity:0;transition:all 0.3s var(--ease);pointer-events:none;max-width:400px;display:flex;align-items:center;gap:8px;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.ok{border-left:3px solid var(--green);}
.toast.err{border-left:3px solid var(--red);}
.toast.warn{border-left:3px solid var(--yellow);}
.toast-icon{font-size:14px;flex-shrink:0;}

/* PROGRESS BAR */
.progress-bar-wrap{background:var(--border);border-radius:6px;height:10px;overflow:hidden;position:relative;}
.progress-bar{height:100%;border-radius:6px;transition:width 0.6s var(--ease);position:relative;}
.progress-bar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.1) 50%,transparent 100%);border-radius:inherit;}

/* EMPTY STATE */
.empty-state{text-align:center;padding:var(--space-8) var(--space-4);color:var(--muted);}
.empty-state-icon{font-size:32px;margin-bottom:var(--space-3);opacity:0.4;}
.empty-state-title{font-size:var(--text-base);font-weight:600;color:var(--text);margin-bottom:4px;}
.empty-state-desc{font-size:var(--text-sm);margin-bottom:var(--space-4);}

/* TREND INDICATORS */
.trend-up{color:var(--green);font-size:var(--text-xs);font-family:var(--mono);}
.trend-down{color:var(--red);font-size:var(--text-xs);font-family:var(--mono);}
.trend-flat{color:var(--muted);font-size:var(--text-xs);font-family:var(--mono);}
.trend-arrow{font-size:8px;margin-right:2px;}

/* SPINNER */
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:32px;height:32px;border:2px solid var(--border2);border-top-color:var(--gold);border-radius:50%;animation:spin 0.8s linear infinite;}

/* SCROLLBAR */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--muted2)}

/* RESPONSIVE */
@media(max-width:800px){
  #sidenav{position:fixed;left:-100%;z-index:100;transition:left 0.25s;}
  #sidenav.open{left:0;}
  #menuBtn{display:inline-flex!important;}
  .hide-sm{display:none!important}
  .page-body{padding:14px;}
  .metric-grid{grid-template-columns:repeat(2,1fr);}
}