/* 2) style.css (full) */
:root{
  --blue:#0B3D91;
  --blue-700:#08357E;
  --bg:#F5F7FB;
  --card:#FFFFFF;
  --text:#0F172A;
  --muted:#475569;
  --border:#D7DFEC;
  --danger:#B42318;
  --success:#0E7A2D;

  --r12:12px;
  --r16:16px;

  --s4:4px;
  --s8:8px;
  --s12:12px;
  --s16:16px;
  --s20:20px;
  --s24:24px;

  --navH:72px;
  --topH:64px;

  --tap:44px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Hind Siliguri", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

button, input, select{
  font-family:inherit;
}

.app{
  min-height:100%;
  display:flex;
  flex-direction:column;
}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  height:var(--topH);
  background:var(--card);
  border-bottom:1px solid var(--border);
  padding:0 var(--s16);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:var(--s12);
}

.brand__logo{
  width:40px;
  height:40px;
  border-radius:12px;
  background:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:18px;
}

.brand__title{
  font-weight:700;
  font-size:16px;
  line-height:1.1;
}
.brand__sub{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.iconBtn{
  width:var(--tap);
  height:var(--tap);
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--blue);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.iconBtn:active{ transform:translateY(1px); }
.iconBtn--close{
  border-color:var(--border);
  color:var(--text);
}

.main{
  flex:1;
  padding-bottom:calc(var(--navH) + var(--s16));
}

.container{
  max-width:980px;
  margin:0 auto;
  padding:var(--s16);
}

.page{ display:none; }
.page.isActive{ display:block; }

.helloCard{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r16);
  padding:var(--s16);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s16);
}

.helloCard__title{
  font-size:16px;
  font-weight:700;
}
.helloCard__hint{
  margin-top:var(--s4);
  font-size:13px;
  color:var(--muted);
}

.badgeBlue{
  width:44px;
  height:44px;
  border-radius:14px;
  background:var(--blue);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

.gridCards{
  margin-top:var(--s16);
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s12);
}

.statCard{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r16);
  padding:var(--s16);
}

.statCard__top{
  display:flex;
  gap:var(--s12);
  align-items:center;
}
.statCard__icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:18px;
}
.iconIncome{ background:var(--success); }
.iconExpense{ background:var(--danger); }
.iconBalance{ background:var(--blue); }

.statCard__label{
  font-size:12px;
  color:var(--muted);
  line-height:1.2;
}
.statCard__value{
  font-size:20px;
  font-weight:800;
  margin-top:2px;
}
.statCard__foot{
  margin-top:var(--s12);
  padding-top:var(--s12);
  border-top:1px solid var(--border);
}
.statCard__sub{
  font-size:12px;
  color:var(--muted);
}

.statCard--balance .statCard__value{
  color:var(--blue);
}

.ctaRow{
  margin-top:var(--s16);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s12);
}

.ctaRow--single{
  grid-template-columns:1fr;
}

.btn{
  height:var(--tap);
  border-radius:14px;
  border:1px solid var(--border);
  padding:0 var(--s16);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s8);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  background:var(--card);
  color:var(--text);
}
.btn:active{ transform:translateY(1px); }

.btnPrimary{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}
.btnPrimary:hover{ background:var(--blue-700); border-color:var(--blue-700); }

.btnOutline{
  background:var(--card);
  border-color:var(--blue);
  color:var(--blue);
}

.btnDanger{
  background:var(--danger);
  border-color:var(--danger);
  color:#fff;
  width:100%;
}

.btnSmall{
  height:40px;
  border-radius:12px;
  font-size:13px;
  padding:0 12px;
}

.btnFile{
  justify-content:center;
  user-select:none;
}

.sectionHead{
  margin-top:var(--s20);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s12);
}
.sectionHead__title{
  font-size:14px;
  font-weight:800;
}

.linkBtn{
  border:none;
  background:none;
  color:var(--blue);
  font-weight:700;
  font-size:13px;
  padding:8px 0;
  cursor:pointer;
}
.linkBtn:active{ transform:translateY(1px); }

.listCard{
  margin-top:var(--s12);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r16);
  overflow:hidden;
}

.txnList{ display:flex; flex-direction:column; }

.txnRow{
  display:flex;
  align-items:center;
  gap:var(--s12);
  padding:var(--s12) var(--s16);
  border-top:1px solid var(--border);
}
.txnRow:first-child{ border-top:none; }

.txnIcon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  flex:0 0 auto;
  font-size:16px;
}
.txnIcon--income{ background:var(--success); }
.txnIcon--expense{ background:var(--danger); }

.txnMain{
  flex:1;
  min-width:0;
}
.txnTitle{
  font-weight:800;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.txnSub{
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
  display:flex;
  gap:var(--s8);
  flex-wrap:wrap;
}
.pill{
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  background:var(--card);
}

.txnAmt{
  font-weight:900;
  font-size:14px;
  text-align:right;
}
.txnAmt--income{ color:var(--success); }
.txnAmt--expense{ color:var(--danger); }

.txnActions{
  display:flex;
  gap:var(--s8);
  margin-left:var(--s8);
}
.miniBtn{
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  cursor:pointer;
}
.miniBtn--danger{ color:var(--danger); border-color:var(--danger); }

.emptyState{
  display:none;
  padding:var(--s24) var(--s16);
  text-align:center;
}
.emptyState__icon{
  width:52px;
  height:52px;
  border-radius:18px;
  background:var(--bg);
  border:1px solid var(--border);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:var(--blue);
}
.emptyState__title{
  margin-top:var(--s12);
  font-weight:900;
}
.emptyState__sub{
  margin-top:var(--s4);
  color:var(--muted);
  font-size:13px;
}

.panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r16);
  padding:var(--s16);
  margin-top:var(--s16);
}

.panel__title{
  font-weight:900;
  font-size:14px;
}
.panel__sub{
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
}

.panelTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--s12);
}

.field{
  margin-top:var(--s12);
}
.field--full{ grid-column:1 / -1; }

.label{
  display:block;
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  margin-bottom:6px;
}

.input{
  width:100%;
  height:var(--tap);
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--card);
  padding:0 12px;
  font-size:14px;
  outline:none;
}
.input:focus{
  border-color:var(--blue);
}

.input--monthCompact{
  width:160px;
}

.help{
  display:none;
  margin-top:6px;
  font-size:12px;
  color:var(--danger);
  font-weight:700;
}

.filters{
  margin-top:var(--s12);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s12);
}

.searchWrap{
  position:relative;
}
.searchIcon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  font-size:14px;
}
.input--search{
  padding-left:36px;
}

.miniRow{
  margin-top:var(--s12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s12);
}

.chip{
  height:36px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:12px;
  color:var(--muted);
}

.kpiGrid{
  margin-top:var(--s12);
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:var(--s12);
}

.kpi{
  border:1px solid var(--border);
  border-radius:14px;
  padding:var(--s12);
  background:var(--bg);
}
.kpi__label{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}
.kpi__value{
  margin-top:4px;
  font-weight:900;
  font-size:16px;
}

.chartCard{
  margin-top:var(--s12);
  border:1px solid var(--border);
  border-radius:var(--r16);
  background:var(--bg);
  padding:var(--s12);
  overflow:hidden;
}

.legend{
  margin-top:var(--s12);
  display:flex;
  flex-direction:column;
  gap:var(--s8);
}
.legendItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s12);
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
}
.legendLeft{
  display:flex;
  align-items:center;
  gap:var(--s10);
  min-width:0;
}
.legendDot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--blue);
  flex:0 0 auto;
}
.legendName{
  font-weight:900;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.legendValue{
  font-weight:900;
  font-size:13px;
  color:var(--muted);
}

.divider{
  height:1px;
  background:var(--border);
  margin:var(--s16) 0;
}

/* Bottom Nav */
.bottomNav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:var(--navH);
  background:var(--card);
  border-top:1px solid var(--border);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  z-index:20;
}

.navItem{
  border:none;
  background:transparent;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--muted);
  font-weight:800;
  font-size:11px;
}
.navItem i{ font-size:18px; }
.navItem.isActive{
  color:var(--blue);
}
.navItem.isActive i{
  color:var(--blue);
}

/* Modal: no transparency overlay */
.modalRoot{
  position:fixed;
  inset:0;
  display:none;
  z-index:30;
  background:var(--bg); /* solid, no rgba */
}
.modalRoot.isOpen{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:var(--s12);
}

.modalSheet{
  width:100%;
  max-width:520px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
}

.modalHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--s16);
  border-bottom:1px solid var(--border);
}
.modalHead__left{
  display:flex;
  align-items:center;
  gap:var(--s12);
}
.modalIcon{
  width:44px;
  height:44px;
  border-radius:14px;
  background:var(--blue);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.modalTitle{
  font-weight:900;
  font-size:14px;
}
.modalSub{
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
}

.modalBody{
  padding:var(--s16);
}

.modalActions{
  margin-top:var(--s16);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s12);
}

/* Toast */
.toast{
  position:fixed;
  left:var(--s16);
  right:var(--s16);
  bottom:calc(var(--navH) + var(--s16));
  background:var(--text);
  color:#fff;
  border-radius:14px;
  padding:12px 14px;
  border:1px solid #0B1220;
  display:none;
  z-index:40;
}
.toast.isOpen{ display:block; }
.toast__text{ font-weight:700; font-size:13px; }

/* Utilities */
.spacer24{ height:24px; }
.srOnly{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  border:0;
}

/* ✅ FIX: Mobile modal height (top gap remove) */
@media (max-width: 859px){
  .modalRoot.isOpen{
    padding: 0;                 /* no outer padding -> no top empty space */
    align-items: stretch;       /* allow full height container */
  }

  .modalSheet{
    max-width: none;            /* full width on mobile */
    width: 100%;
    margin-top: auto;           /* push to bottom */
    height: min(92dvh, 92vh);   /* viewport-aware height */
    border-radius: 20px 20px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }

  .modalBody{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(min(92dvh, 92vh) - 78px); /* head space reserved */
  }
}

/* Desktop enhancements */
@media (min-width: 860px){
  .topbar{
    height:72px;
    padding:0 24px;
  }
  .brand__title{ font-size:18px; }
  .container{ padding:24px; }

  .gridCards{
    grid-template-columns:repeat(3, 1fr);
  }
  .ctaRow{
    grid-template-columns:240px 240px;
    justify-content:flex-start;
  }

  .modalRoot.isOpen{
    align-items:center; /* centered modal */
    padding: var(--s12);
  }
  .modalSheet{
    border-radius:22px;
    height:auto;        /* desktop modal content height */
  }

  .bottomNav{
    left:50%;
    transform:translateX(-50%);
    max-width:980px;
    border-left:1px solid var(--border);
    border-right:1px solid var(--border);
  }
}