/* ============================================================
   Kharcha — Expense Tracker  ·  Redesigned UI
   Mobile-first · iPhone optimised · Glassmorphism accents
   ============================================================ */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Tokens ── */
:root{
  --pri:#4361ee;--pri-l:#5a7cf7;--pri-d:#3a56d4;--pri-bg:#eef2ff;
  --acc:#7c3aed;--acc-l:#a78bfa;
  --ok:#06d6a0;--ok-bg:#ecfdf5;
  --err:#ef4444;--err-bg:#fef2f2;
  --warn:#f59e0b;--warn-bg:#fffbeb;
  --txt:#1e293b;--txt2:#64748b;--txt3:#94a3b8;
  --bg:#f4f6fb;--card:#fff;--input:#f8fafc;
  --brd:#e2e8f0;--focus:var(--pri);
  --sh-sm:0 1px 3px rgba(0,0,0,.06);
  --sh-md:0 4px 12px rgba(67,97,238,.10),0 1px 3px rgba(0,0,0,.06);
  --sh-lg:0 12px 28px rgba(67,97,238,.12),0 4px 8px rgba(0,0,0,.06);
  --r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:24px;--r-full:9999px;
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --nav-h:64px;
}

/* ── Base ── */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font);color:var(--txt);background:var(--bg);
  min-height:100dvh;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}

/* ── Utility ── */
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hidden-mobile{display:none!important}

/* ============================================================
   LAYOUT
   ============================================================ */
#app{display:flex;flex-direction:column;min-height:100dvh}

/* ── Header ── */
.app-header{
  background:linear-gradient(135deg,var(--pri) 0%,var(--acc) 100%);
  color:#fff;padding:var(--s3);
  padding-top:calc(env(safe-area-inset-top,0px)+var(--s3));
  display:flex;align-items:center;gap:var(--s2);
  position:sticky;top:0;z-index:100;
  box-shadow:0 4px 20px rgba(67,97,238,.35);
}
.app-title{font-size:1.2rem;font-weight:800;letter-spacing:-.02em}
.header-brand{flex-shrink:0}
.header-pills{display:flex;gap:var(--s1);margin-left:auto}
.pill{
  display:flex;flex-direction:column;align-items:center;
  background:rgba(255,255,255,.15);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:3px 10px;border-radius:var(--r-sm);min-width:68px;
}
.pill-label{font-size:.55rem;text-transform:uppercase;letter-spacing:.08em;opacity:.85}
.pill-value{font-size:.82rem;font-weight:700}
.header-action{
  background:rgba(255,255,255,.18);border:none;border-radius:var(--r-sm);
  width:38px;height:38px;font-size:1.1rem;cursor:pointer;
  display:grid;place-items:center;transition:background .2s;flex-shrink:0;
}
.header-action:hover{background:rgba(255,255,255,.3)}

/* ── Main ── */
.app-main{
  flex:1;padding:var(--s3);
  padding-bottom:calc(var(--nav-h) + var(--s3) + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:var(--s3);
}

/* ── Card ── */
.card{
  background:var(--card);border-radius:var(--r-xl);
  box-shadow:var(--sh-md);padding:var(--s4);
  animation:slideUp .3s ease-out;
}
.card-title{font-size:1.05rem;font-weight:700;margin-bottom:var(--s3)}

/* ============================================================
   FORM
   ============================================================ */
.field{margin-bottom:var(--s3)}
.field>label,.field-head label{
  display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--txt2);margin-bottom:var(--s1);
}
.field-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s1)}
.field-head label{margin-bottom:0}

/* Edit toggle */
.btn-edit{
  background:none;border:1px solid transparent;font-size:.85rem;
  cursor:pointer;padding:2px 8px;border-radius:var(--r-full);
  opacity:.45;transition:all .2s;line-height:1;
}
.btn-edit:hover,.btn-edit.active{opacity:1;background:var(--pri-bg);border-color:var(--brd)}
.btn-edit.active{border-color:var(--pri);color:var(--pri)}

/* Amount */
.amount-wrap{
  display:flex;align-items:center;border:2px solid var(--brd);
  border-radius:var(--r-md);overflow:hidden;background:var(--input);
  transition:border-color .2s,box-shadow .2s;
}
.amount-wrap:focus-within{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-bg)}
.amount-prefix{
  padding:10px 14px;font-size:1rem;font-weight:800;
  color:var(--txt2);background:var(--brd);line-height:1;
}
.amount-wrap input{
  flex:1;border:none;background:transparent;padding:10px 14px;
  font-size:1.4rem;font-weight:700;color:var(--txt);outline:none;min-width:0;
}
.amount-wrap input::placeholder{color:var(--txt3);font-weight:400}

/* ── Inputs ── */
.input,input[type="datetime-local"],textarea{
  width:100%;padding:10px 12px;border:2px solid var(--brd);
  border-radius:var(--r-md);background:var(--input);color:var(--txt);
  font-size:.88rem;transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;appearance:none;
}
.input:focus,input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-bg);
}
textarea{resize:vertical}
.input-icon{width:64px;text-align:center;font-size:1.3rem}

/* ── Chip Grid ── */
.chip-grid{display:flex;flex-wrap:wrap;gap:var(--s2);transition:all .25s}
.chip-grid.editing{
  padding:var(--s2);border:2px dashed var(--pri);
  border-radius:var(--r-md);background:var(--pri-bg);
}

.chip{
  position:relative;display:inline-flex;align-items:center;gap:4px;
  padding:7px 14px;border:2px solid var(--brd);border-radius:var(--r-full);
  background:var(--card);cursor:pointer;font-size:.8rem;font-weight:500;
  color:var(--txt);transition:all .2s;white-space:nowrap;
  user-select:none;-webkit-tap-highlight-color:transparent;min-height:38px;
}
.chip-icon{font-size:1rem;line-height:1}
.chip:active{transform:scale(.96)}

/* Brand accents */
.chip[data-value="esewa"]{--ca:#60BB46}.chip[data-value="khalti"]{--ca:#5C2D91}
.chip[data-value="fonepay"]{--ca:#E31E24}.chip[data-value="imepay"]{--ca:#0066B3}
.chip[data-value="connectips"]{--ca:#F7941D}.chip[data-value="nicasia"]{--ca:#CC0000}
.chip[data-value="nabil"]{--ca:#8B0000}.chip[data-value="globalime"]{--ca:#003399}
.chip[data-value="sanima"]{--ca:#006633}.chip[data-value="machha"]{--ca:#0033CC}
.chip[data-value="cash"]{--ca:#6b7280}.chip[data-value="card"]{--ca:#d97706}
.chip[data-value="banktransfer"]{--ca:#0284c7}.chip[data-value="cheque"]{--ca:#0d9488}
.chip[data-value="food"]{--ca:#ef4444}.chip[data-value="transport"]{--ca:#3b82f6}
.chip[data-value="shopping"]{--ca:#8b5cf6}.chip[data-value="bills"]{--ca:#f59e0b}
.chip[data-value="health"]{--ca:#10b981}.chip[data-value="entertainment"]{--ca:#ec4899}
.chip[data-value="education"]{--ca:#6366f1}.chip[data-value="rent"]{--ca:#78716c}
.chip[data-value="salary"]{--ca:#059669}.chip[data-value="other"]{--ca:#94a3b8}

.chip:not(.chip-selected):hover{
  border-color:var(--ca,var(--pri-l));
  background:color-mix(in srgb,var(--ca,var(--pri)) 8%,white);
}
.chip-selected{
  background:var(--ca,var(--pri));border-color:var(--ca,var(--pri));color:#fff;
  box-shadow:0 3px 10px color-mix(in srgb,var(--ca,var(--pri)) 35%,transparent);
}

/* Edit-mode chip decorations */
.chip-remove{
  position:absolute;top:-7px;right:-7px;
  width:20px;height:20px;background:var(--err);color:#fff;
  border-radius:50%;font-size:.6rem;display:grid;place-items:center;
  cursor:pointer;line-height:1;box-shadow:var(--sh-sm);
  animation:pop .2s ease-out;z-index:2;border:2px solid var(--card);
}
.chip-add{
  border-style:dashed;border-color:var(--pri);color:var(--pri);
  background:rgba(67,97,238,.06);font-weight:600;
}
.chip-add:hover{background:var(--pri-bg)}

/* ── Buttons ── */
.btn-save{
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  width:100%;padding:14px;border:none;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--pri),var(--acc));color:#fff;
  font-size:1rem;font-weight:700;cursor:pointer;
  transition:transform .15s,box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn-save:hover{box-shadow:var(--sh-lg)}
.btn-save:active{transform:scale(.97)}

.btn-secondary{
  padding:10px 20px;border:2px solid var(--brd);border-radius:var(--r-md);
  background:var(--card);color:var(--txt);font-weight:600;cursor:pointer;
  transition:background .2s;
}
.btn-secondary:hover{background:var(--bg)}

.btn-capture{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:10px 16px;border:2px dashed var(--brd);border-radius:var(--r-md);
  background:var(--input);color:var(--txt2);font-weight:600;font-size:.85rem;
  cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent;
}
.btn-capture:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-bg)}
.btn-capture-alt{border-color:var(--txt3)}
.btn-capture-alt:hover{border-color:var(--acc);color:var(--acc);background:#f5f3ff}

.btn-sm-primary{
  padding:8px 16px;border:none;border-radius:var(--r-md);
  background:var(--pri);color:#fff;font-weight:600;font-size:.85rem;
  cursor:pointer;transition:background .2s;
}
.btn-sm-primary:hover{background:var(--pri-d)}

.btn-sm-ghost{
  background:none;border:none;font-size:1rem;cursor:pointer;
  color:var(--txt3);padding:4px 8px;border-radius:var(--r-sm);
}
.btn-sm-ghost:hover{color:var(--err)}

.btn-x{
  background:none;border:none;font-size:.95rem;cursor:pointer;
  color:var(--txt3);padding:2px 4px;line-height:1;border-radius:50%;
  transition:color .2s;
}
.btn-x:hover{color:var(--err)}

/* ── Location ── */
.loc-actions{display:flex;gap:var(--s2);flex-wrap:wrap}
.loc-manual{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s2)}
.loc-manual input{flex:1}
.loc-result{
  display:flex;align-items:center;gap:var(--s2);
  padding:var(--s2) var(--s3);background:var(--ok-bg);
  border-radius:var(--r-sm);margin-top:var(--s2);font-size:.85rem;
}
.loc-pin{font-size:1rem;flex-shrink:0}
.loc-address{flex:1;word-break:break-word}

/* ── Photo preview ── */
.photo-preview{
  position:relative;margin-top:var(--s2);border-radius:var(--r-md);
  overflow:hidden;border:2px solid var(--brd);
}
.receipt-preview-img{width:100%;max-height:200px;object-fit:cover}
.btn-clear-photo{
  position:absolute;top:8px;right:8px;
  background:rgba(0,0,0,.55);color:#fff;width:28px;height:28px;
  display:grid;place-items:center;border-radius:50%;font-size:.8rem;
  cursor:pointer;border:none;transition:background .2s;
}
.btn-clear-photo:hover{background:var(--err)}

/* ============================================================
   HISTORY
   ============================================================ */
.filters{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s3)}
.filter-pair{display:flex;gap:var(--s2)}
.filter-pair>*{flex:1;min-width:0}

.expense-list{display:flex;flex-direction:column;max-height:60vh;
  overflow-y:auto;-webkit-overflow-scrolling:touch}

.date-group{margin-bottom:var(--s3)}
.date-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--s1) 0;margin-bottom:var(--s1);
  border-bottom:1px solid var(--brd);
}
.date-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--txt2)}
.date-total{font-size:.7rem;font-weight:700;color:var(--pri)}

.e-card{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r-md);
  background:var(--input);cursor:pointer;transition:all .15s;
  -webkit-tap-highlight-color:transparent;margin-bottom:var(--s1);
}
.e-card:hover{background:var(--pri-bg);transform:translateX(2px)}
.e-card:active{transform:scale(.99)}

.e-left{display:flex;align-items:center;gap:var(--s2);min-width:0;flex:1}
.e-cat-icon{
  font-size:1.4rem;width:38px;height:38px;display:grid;place-items:center;
  background:var(--card);border-radius:var(--r-sm);flex-shrink:0;
  box-shadow:var(--sh-sm);
}
.e-info{display:flex;flex-direction:column;min-width:0}
.e-cat-name{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e-meta{font-size:.68rem;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e-note{font-size:.7rem;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:italic}
.e-right{display:flex;align-items:center;gap:var(--s2);flex-shrink:0}
.e-amount{font-size:.92rem;font-weight:700;white-space:nowrap}
.e-del{
  background:none;border:none;font-size:.95rem;cursor:pointer;padding:4px;
  border-radius:var(--r-sm);opacity:.3;transition:opacity .2s;
}
.e-del:hover{opacity:1}

/* Empty */
.empty{text-align:center;padding:var(--s6) var(--s3);color:var(--txt3)}
.empty-icon{font-size:2.8rem;margin-bottom:var(--s2)}
.empty-title{font-size:.95rem;font-weight:600}
.empty-sub{font-size:.78rem;margin-top:var(--s1)}

/* ============================================================
   STATS
   ============================================================ */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.stat-box{
  text-align:center;padding:var(--s3) var(--s2);
  border-radius:var(--r-md);background:var(--input);
}
.stat-box.stat-hero{background:linear-gradient(135deg,var(--pri),var(--acc));color:#fff}
.stat-box-label{display:block;font-size:.6rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;opacity:.8;margin-bottom:2px}
.stat-box-val{display:block;font-size:1rem;font-weight:800}
.stats-section{margin-top:var(--s4)}
.stats-section h3{font-size:.82rem;font-weight:700;color:var(--txt2);margin-bottom:var(--s2)}
.bar-row{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--s2)}
.bar-label{display:flex;justify-content:space-between;font-size:.75rem;font-weight:500}
.bar-track{height:8px;background:var(--bg);border-radius:var(--r-full);overflow:hidden}
.bar-fill{height:100%;border-radius:var(--r-full);transition:width .5s ease-out;
  background:linear-gradient(90deg,var(--pri),var(--pri-l))}
.bar-fill-alt{background:linear-gradient(90deg,var(--acc),var(--acc-l))}

/* ============================================================
   BOTTOM NAV
   ============================================================ */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:rgba(255,255,255,.85);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--brd);display:flex;
  justify-content:space-around;align-items:center;z-index:200;
}
.tab{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:6px 18px;border:none;background:none;color:var(--txt3);
  font-size:.6rem;font-weight:600;cursor:pointer;border-radius:var(--r-sm);
  transition:color .2s;-webkit-tap-highlight-color:transparent;
}
.tab-icon{font-size:1.25rem}
.tab.active{color:var(--pri)}
.tab.active .tab-icon{animation:bounce .3s ease-out}

/* ============================================================
   DIALOGS
   ============================================================ */
.dialog{
  border:none;border-radius:var(--r-xl);box-shadow:var(--sh-lg);
  padding:var(--s4);max-width:420px;width:calc(100% - 32px);
  animation:slideUp .25s ease-out;
}
.dialog::backdrop{background:rgba(15,23,42,.4);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.dialog-sm{max-width:340px}
.dialog-heading{font-size:1.05rem;font-weight:700;margin-bottom:var(--s3)}
.dialog-footer{display:flex;justify-content:flex-end;gap:var(--s2);margin-top:var(--s3)}

/* Detail */
.detail-head{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.detail-icon{font-size:2.4rem}
.detail-amt{font-size:1.7rem;font-weight:800}
.detail-rows{display:flex;flex-direction:column;gap:var(--s2)}
.detail-row{display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--s3);padding:var(--s1) 0;border-bottom:1px solid var(--brd);font-size:.84rem}
.detail-lbl{color:var(--txt3);font-weight:600;white-space:nowrap}
.detail-val{text-align:right;word-break:break-word}
.detail-img{margin-top:var(--s3);border-radius:var(--r-md);overflow:hidden}
.detail-img img{width:100%;border-radius:var(--r-md)}

/* Export */
.export-btns{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s3)}
.btn-export-opt{
  display:flex;align-items:center;gap:var(--s2);padding:14px 16px;
  border:2px solid var(--brd);border-radius:var(--r-md);
  background:var(--input);font-weight:600;cursor:pointer;font-size:.88rem;
  transition:all .2s;
}
.btn-export-opt:hover{border-color:var(--pri);background:var(--pri-bg)}

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed;bottom:calc(var(--nav-h) + var(--s3) + env(safe-area-inset-bottom,0px));
  left:50%;transform:translateX(-50%);padding:10px 22px;
  border-radius:var(--r-full);font-size:.84rem;font-weight:600;
  z-index:999;box-shadow:var(--sh-lg);animation:toastIn .3s ease-out;white-space:nowrap;
}
.toast-success{background:var(--ok);color:#fff}
.toast-danger{background:var(--err);color:#fff}
.toast-warning{background:var(--warn);color:#fff}
.toast-info{background:var(--pri);color:#fff}
.toast-hide{animation:toastOut .3s forwards}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes slideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounce{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes toastOut{from{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(14px)}}

/* ============================================================
   DESKTOP  (≥ 768px)
   ============================================================ */
@media(min-width:768px){
  .hidden-mobile{display:block!important}
  .bottom-nav{display:none}

  .app-main{
    padding-bottom:var(--s4);flex-direction:row;flex-wrap:wrap;
    max-width:1200px;margin:0 auto;align-items:flex-start;
  }
  .form-card{flex:1 1 420px;max-width:500px;position:sticky;top:80px;align-self:flex-start}
  .history-card{flex:1 1 400px}
  .stats-card{flex-basis:100%}
  .app-header{padding:var(--s3) var(--s5)}
  .pill{padding:5px 14px;min-width:90px}
  .chip{padding:8px 16px;font-size:.84rem}
  .dialog{max-width:500px}
  .toast{bottom:var(--s5)}
  .expense-list{max-height:70vh}
}
@media(min-width:1024px){
  .form-card{max-width:520px}
}

/* ============================================================
   TRANSACTION TYPE TABS (INCOME / EXPENSE)
   ============================================================ */
.txn-tabs {
  display: flex; gap: 4px; background: var(--bg); padding: 4px; 
  border-radius: var(--r-md); margin-bottom: var(--s3);
}
.txn-tabs input { display: none; }
.txn-tab {
  flex: 1; text-align: center; padding: 10px; border-radius: var(--r-sm); 
  font-size: 0.88rem; font-weight: 700; color: var(--txt2); cursor: pointer; 
  transition: 0.2s;
}
#t-exp:checked ~ label[for="t-exp"] {
  background: var(--card); color: var(--pri); box-shadow: var(--sh-sm);
}
#t-inc:checked ~ label[for="t-inc"] {
  background: var(--card); color: #10b981; box-shadow: var(--sh-sm);
}
.amt-inc { color: #10b981 !important; }
.amt-exp { color: var(--txt) !important; }