/* =====================================================================
   FinancePro - Stylesheet
   Color palette:
     #101418  near-black (app background)
     #2C3E50  slate blue (surfaces, header, secondary)
     #B08D57  gold/bronze (primary actions, active, key figures)
     #DCC9A6  sand/beige (subtle accents, tags)
     #FBF6EE  cream (text on dark, card fills)
   Mobile-first. App-like. Rounded cards. Fixed bottom nav.
   ===================================================================== */

:root{
  --c-ink:#101418;
  --c-slate:#2C3E50;
  --c-slate-2:#374b60;
  --c-gold:#B08D57;
  --c-gold-2:#9c7a47;
  --c-sand:#DCC9A6;
  --c-cream:#FBF6EE;
  --c-muted:#8a8174;
  --c-line:rgba(220,201,166,.18);
  --c-good:#3b8f5d;
  --c-warn:#c9962f;
  --c-bad:#c0563f;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --shadow-soft:0 6px 18px rgba(0,0,0,.30);
  --maxw:480px;
  --nav-h:64px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--c-ink);
  color:var(--c-cream);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  font-size:15px;
  line-height:1.45;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:15px}

/* ---------- Phone shell / centered column ---------- */
.phone-shell{
  max-width:var(--maxw);
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  background:linear-gradient(180deg,#101418 0%,#161b22 60%,#101418 100%);
  box-shadow:var(--shadow);
}
.admin-shell{max-width:560px}

.app-main{flex:1;padding:14px 16px calc(var(--nav-h) + 18px);width:100%}

/* ---------- App header ---------- */
.app-header{
  position:sticky;top:0;z-index:20;
  background:var(--c-slate);
  color:var(--c-cream);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--c-line);
}
.hdr-left{display:flex;align-items:center;gap:12px}
.avatar{
  width:42px;height:42px;border-radius:50%;
  background:var(--c-gold);color:var(--c-ink);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:18px;
  border:2px solid var(--c-sand);overflow:hidden;flex:none;
}
.avatar img{width:100%;height:100%;object-fit:cover}
.admin-avatar{background:var(--c-ink);color:var(--c-gold);border-color:var(--c-gold)}
.hdr-greet .greet-line{font-size:12px;color:var(--c-sand);opacity:.85}
.hdr-greet .greet-name{font-size:16px;font-weight:700;color:var(--c-cream);line-height:1.2}
.hdr-bell{
  position:relative;width:42px;height:42px;border-radius:12px;
  background:rgba(16,20,24,.35);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.hdr-bell:hover{background:rgba(16,20,24,.55)}
.hdr-bell img{filter:brightness(0) invert(1); opacity:0.9}
.bell-dot{
  position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;
  background:var(--c-gold);color:var(--c-ink);font-size:11px;font-weight:700;
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--c-slate);
}

/* ---------- Flash messages ---------- */
.flashes{padding:8px 16px 0;display:flex;flex-direction:column;gap:8px}
.flash{
  padding:10px 12px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;
  border:1px solid var(--c-line);background:var(--c-slate);color:var(--c-cream);
}
.flash-success{background:rgba(59,143,93,.18);border-color:rgba(59,143,93,.5);color:#bff0d2}
.flash-error{background:rgba(192,86,63,.18);border-color:rgba(192,86,63,.5);color:#f6c8bf}
.flash-info{background:rgba(176,141,87,.18);border-color:rgba(176,141,87,.5);color:#f0e2c6}

/* ---------- Cards ---------- */
.card{
  background:var(--c-cream);color:var(--c-ink);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:14px;
  box-shadow:var(--shadow-soft);
}
.card.slate{background:var(--c-slate);color:var(--c-cream)}
.card.gold{background:linear-gradient(135deg,#B08D57 0%,#9c7a47 100%);color:var(--c-ink)}
.card.outline{background:transparent;border:1px solid var(--c-line);color:var(--c-cream)}
.card-title{font-size:13px;font-weight:700;color:var(--c-slate);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.card.slate .card-title,.card.gold .card-title{color:inherit;opacity:.85}
.section-head{
  display:flex;align-items:center;justify-content:space-between;margin:6px 2px 10px;
}
.section-head h3{font-size:14px;font-weight:700;color:var(--c-sand);text-transform:uppercase;letter-spacing:.06em}
.section-head a:not(.btn){font-size:12.5px;color:var(--c-gold);font-weight:700}

/* ---------- Hero balance / loan summary card ---------- */
.hero{
  background:linear-gradient(135deg,#2C3E50 0%,#101418 100%);
  border:1px solid var(--c-line);
  color:var(--c-cream);
  border-radius:var(--radius);
  padding:18px;margin-bottom:14px;
  box-shadow:var(--shadow-soft);
}
.hero .lbl{font-size:12px;color:var(--c-sand);text-transform:uppercase;letter-spacing:.06em}
.hero .amt{font-size:30px;font-weight:800;color:var(--c-cream);margin-top:4px;letter-spacing:-.01em}
.hero .amt small{font-size:14px;color:var(--c-sand);font-weight:600}
.hero .sub{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap}
.hero .sub div{flex:1;min-width:0}
.hero .sub .v{font-size:17px;font-weight:800;color:var(--c-gold)}
.hero .sub .k{font-size:11px;color:var(--c-sand);text-transform:uppercase;letter-spacing:.05em}
.hero.gold-grad{background:linear-gradient(135deg,#B08D57 0%,#9c7a47 100%);color:var(--c-ink)}
.hero.gold-grad .lbl,.hero.gold-grad .sub .k{color:rgba(16,20,24,.7)}
.hero.gold-grad .amt,.hero.gold-grad .sub .v{color:var(--c-ink)}

/* ---------- Loan options grid (Home) ---------- */
.loan-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;
}
.loan-card{
  background:var(--c-cream);color:var(--c-ink);
  border-radius:var(--radius);padding:16px 14px;
  text-align:center;position:relative;overflow:hidden;
  box-shadow:var(--shadow-soft);
  transition:transform .15s ease, box-shadow .15s ease;
}
.loan-card:active{transform:scale(.97)}
.loan-card .lic{
  width:48px;height:48px;border-radius:14px;margin:0 auto 10px;
  background:linear-gradient(135deg,#DCC9A6,#B08D57);
  display:flex;align-items:center;justify-content:center;
}
.loan-card .lic img{width:26px;height:26px}
.loan-card .lt{font-size:15px;font-weight:800;color:var(--c-ink)}
.loan-card .ld{font-size:11.5px;color:var(--c-slate);opacity:.75;margin-top:3px;line-height:1.3}
.loan-card .corner{position:absolute;top:12px;right:14px;color:var(--c-gold);font-weight:800;font-size:18px}

/* ---------- Quick stat row ---------- */
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.stat{
  background:var(--c-cream);color:var(--c-ink);
  border-radius:var(--radius-sm);padding:14px;
  box-shadow:var(--shadow-soft);
}
.stat .k{font-size:11px;color:var(--c-slate);text-transform:uppercase;letter-spacing:.05em;opacity:.75}
.stat .v{font-size:20px;font-weight:800;margin-top:4px;color:var(--c-ink)}
.stat.gold .v{color:var(--c-gold-2)}
.stat.bad .v{color:var(--c-bad)}

/* ---------- List rows ---------- */
.list{display:flex;flex-direction:column;gap:10px}
.list-item{
  background:var(--c-cream);color:var(--c-ink);
  border-radius:var(--radius-sm);padding:14px;
  display:flex;align-items:center;gap:12px;
  box-shadow:var(--shadow-soft);
}
.list-item .li-ic{
  width:42px;height:42px;border-radius:12px;flex:none;
  background:linear-gradient(135deg,#DCC9A6,#B08D57);
  display:flex;align-items:center;justify-content:center;color:var(--c-ink);
}
.list-item .li-ic img{width:22px;height:22px}
.list-item .li-body{flex:1;min-width:0}
.list-item .li-t{font-weight:700;font-size:14.5px;color:var(--c-ink)}
.list-item .li-s{font-size:12.5px;color:var(--c-slate);opacity:.8;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item .li-r{font-weight:800;color:var(--c-gold-2);font-size:15px;text-align:right;flex:none}
.list-item .li-meta{font-size:11px;color:var(--c-muted);margin-top:2px}
a.list-item:hover{background:#fff}
.list-item.col{flex-direction:column;align-items:stretch;gap:6px}
.list-item.col .li-top{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}

/* ---------- Badges ---------- */
.badge{
  display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;
  letter-spacing:.03em;text-transform:capitalize;white-space:nowrap;
}
.badge-gold{background:rgba(176,141,87,.18);color:var(--c-gold-2)}
.badge-good{background:rgba(59,143,93,.18);color:#2f7a4d}
.badge-warn{background:rgba(201,150,47,.18);color:#a87a1f}
.badge-bad{background:rgba(192,86,63,.18);color:#a8432c}
.badge-muted{background:rgba(44,62,80,.12);color:var(--c-slate)}
.badge-on-dark.badge-gold{background:rgba(176,141,87,.25);color:#e8cf9f}
.badge-on-dark.badge-good{background:rgba(59,143,93,.25);color:#bff0d2}
.badge-on-dark.badge-warn{background:rgba(201,150,47,.25);color:#f0d59a}
.badge-on-dark.badge-bad{background:rgba(192,86,63,.25);color:#f6c8bf}
.badge-on-dark.badge-muted{background:rgba(220,201,166,.18);color:var(--c-sand)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 16px;border-radius:14px;font-weight:700;font-size:14.5px;
  cursor:pointer;border:none;transition:transform .12s ease,opacity .15s;
  min-height:46px;text-align:center;line-height:1;
}
.btn:active{transform:scale(.97)}
.btn-block{display:flex;width:100%}
.btn-gold{background:var(--c-gold);color:var(--c-ink)}
.btn-gold:hover{background:var(--c-gold-2);color:var(--c-cream)}
.btn-slate{background:var(--c-slate);color:var(--c-cream)}
.btn-slate:hover{background:var(--c-slate-2)}
.btn-cream{background:var(--c-cream);color:var(--c-ink);border:1px solid var(--c-line)}
.btn-cream:hover{background:#fff}
.btn-outline{background:transparent;border:1.5px solid var(--c-gold);color:var(--c-gold)}
.btn-outline:hover{background:rgba(176,141,87,.12)}
.btn-danger{background:rgba(192,86,63,.15);color:#d65f47;border:1px solid rgba(192,86,63,.5)}
.btn-danger:hover{background:rgba(192,86,63,.25)}
.btn-sm{padding:9px 12px;min-height:36px;font-size:13px;border-radius:10px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.btn-row .btn{flex:1}

/* ---------- Forms ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--c-slate);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
.card.slate .field label{color:var(--c-sand)}
.input,.select,.textarea{
  width:100%;padding:13px 14px;border-radius:12px;
  border:1px solid var(--c-line);background:var(--c-cream);color:var(--c-ink);
  font-size:15px;outline:none;transition:border .15s,box-shadow .15s;
}
.input:focus,.select:focus,.textarea:focus{border-color:var(--c-gold);box-shadow:0 0 0 3px rgba(176,141,87,.2)}
.textarea{min-height:90px;resize:vertical}
.help{font-size:11.5px;color:var(--c-muted);margin-top:5px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hint-box{
  background:rgba(176,141,87,.10);border:1px dashed var(--c-gold);
  border-radius:12px;padding:12px;font-size:13px;color:var(--c-slate);
}
.card.slate .hint-box { color:var(--c-cream); }
.hint-box b{color:var(--c-gold)}
.form-note{font-size:12px;color:var(--c-sand);margin-top:10px;text-align:center}

/* ---------- Auth screens ---------- */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;
  background:radial-gradient(120% 80% at 50% 0%,#2C3E50 0%,#101418 60%);
}
.auth-card{
  width:100%;max-width:420px;background:var(--c-cream);color:var(--c-ink);
  border-radius:24px;padding:28px 22px;box-shadow:var(--shadow);
}
.auth-logo{text-align:center;margin-bottom:18px}
.auth-logo .lg-circle{
  width:64px;height:64px;border-radius:18px;margin:0 auto 12px;
  background:linear-gradient(135deg,#B08D57,#9c7a47);
  display:flex;align-items:center;justify-content:center;
}
.auth-logo .lg-circle img{width:34px;height:34px}
.auth-logo h1{font-size:22px;font-weight:800;color:var(--c-ink);letter-spacing:-.01em}
.auth-logo p{font-size:13px;color:var(--c-slate);opacity:.75;margin-top:4px}
.auth-tabs{display:flex;background:#efe6d6;border-radius:12px;padding:4px;margin-bottom:18px}
.auth-tabs a{flex:1;text-align:center;padding:9px;border-radius:9px;font-size:13.5px;font-weight:700;color:var(--c-slate)}
.auth-tabs a.active{background:var(--c-gold);color:var(--c-ink)}

/* ---------- Bottom navigation ---------- */
.bottom-nav{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:0;width:100%;max-width:var(--maxw);
  background:var(--c-slate);
  border-top:1px solid var(--c-line);
  display:flex;justify-content:space-around;align-items:stretch;
  height:var(--nav-h);z-index:30;
  padding-bottom:env(safe-area-inset-bottom,0);
}
.admin-shell .bottom-nav{max-width:560px}
.bn-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:var(--c-sand);opacity:0.8;padding:6px 2px;position:relative;
}
.bn-item.active{color:var(--c-gold);opacity:1}
.bn-ic{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.bn-ic img{width:22px;height:22px;opacity:0.85;filter:brightness(0) invert(1)}
.bn-item.active .bn-ic img{opacity:1;filter:brightness(0) sepia(1) hue-rotate(20deg) saturate(3) brightness(1.2)}
.bn-item.active::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--c-gold);
}
.bn-label{font-size:10.5px;font-weight:600;letter-spacing:.01em}
.bn-count{
  position:absolute;top:4px;right:calc(50% - 22px);min-width:16px;height:16px;padding:0 4px;
  background:var(--c-bad);color:#fff;font-size:10px;font-weight:700;border-radius:8px;
  display:flex;align-items:center;justify-content:center;border:1.5px solid var(--c-slate);
}

/* ---------- Detail rows / key-value ---------- */
.kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed rgba(44,62,80,.15)}
.kv:last-child{border-bottom:none}
.kv .k{font-size:13px;color:var(--c-slate);opacity:.8}
.kv .v{font-size:14px;font-weight:700;color:var(--c-ink);text-align:right}
.card.slate .kv .k{color:var(--c-sand);opacity:.85}
.card.slate .kv .v{color:var(--c-cream)}
.card.slate .kv{border-bottom-color:rgba(220,201,166,.18)}

/* ---------- Installments table (mobile friendly) ---------- */
.inst-list{display:flex;flex-direction:column;gap:8px}
.inst-row{
  display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;
  background:rgba(44,62,80,.05);border-radius:10px;padding:10px 12px;
}
.inst-no{
  width:30px;height:30px;border-radius:9px;background:var(--c-slate);color:var(--c-cream);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;
}
.inst-row.paid .inst-no{background:var(--c-good)}
.inst-row.overdue .inst-no{background:var(--c-bad)}
.inst-row.missed .inst-no{background:var(--c-bad)}
.inst-row.partial .inst-no{background:var(--c-warn)}
.inst-mid .d{font-size:12.5px;color:var(--c-slate);opacity:.8}
.inst-mid .s{font-size:11px;margin-top:2px}
.inst-amt{font-weight:800;color:var(--c-ink);font-size:14px}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.tab{
  flex:none;padding:8px 14px;border-radius:20px;font-size:13px;font-weight:700;
  background:rgba(220,201,166,.10);color:var(--c-sand);border:1px solid var(--c-line);
}
.tab.active{background:var(--c-gold);color:var(--c-ink);border-color:var(--c-gold)}

/* ---------- Empty state ---------- */
.empty{text-align:center;padding:34px 16px;color:var(--c-sand);opacity:0.9}
.empty .em-ic{width:56px;height:56px;border-radius:16px;margin:0 auto 14px;background:var(--c-slate);display:flex;align-items:center;justify-content:center}
.empty .em-ic img{width:28px;height:28px;opacity:0.9;filter:brightness(0) invert(1)}
.empty h4{font-size:15px;color:var(--c-cream);margin-bottom:4px}
.empty p{font-size:13px;line-height:1.4}

/* ---------- Back header (inner pages) ---------- */
.sub-header{
  display:flex;align-items:center;gap:10px;margin:2px 2px 14px;
}
.sub-header .back{
  width:38px;height:38px;border-radius:10px;background:var(--c-slate);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.sub-header .back img{width:18px;height:18px;filter:brightness(0) invert(1);opacity:0.9}
.sub-header h2{font-size:18px;font-weight:800;color:var(--c-cream)}
.sub-header .right{margin-left:auto;display:flex;gap:8px}

/* ---------- Modal-ish sheets ---------- */
.sheet{
  position:fixed;inset:0;background:rgba(16,20,24,.6);z-index:50;
  display:none;align-items:flex-end;justify-content:center;
}
.sheet.show{display:flex}
.sheet-inner{
  width:100%;max-width:var(--maxw);background:var(--c-cream);color:var(--c-ink);
  border-radius:22px 22px 0 0;padding:18px 16px calc(env(safe-area-inset-bottom,0px) + 18px);
  max-height:88vh;overflow:auto;
}
.sheet-handle{width:40px;height:4px;border-radius:3px;background:var(--c-sand);margin:0 auto 14px}
.sheet h3{font-size:17px;font-weight:800;color:var(--c-ink);margin-bottom:12px}

/* ---------- QR / payment box ---------- */
.pay-box{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.pay-box .qr{
  width:200px;height:200px;border-radius:14px;background:#fff;padding:10px;
  border:1px solid var(--c-line);box-shadow:var(--shadow-soft);
}
.pay-box .qr img{width:100%;height:100%;object-fit:contain}
.pay-box .upi{
  font-size:18px;font-weight:800;color:var(--c-gold-2);
  background:rgba(176,141,87,.12);padding:8px 16px;border-radius:10px;
}
.copy-row{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:6px}

/* ---------- Doc grid ---------- */
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.doc-item{
  background:var(--c-cream);color:var(--c-ink);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow-soft);display:flex;flex-direction:column;
}
.doc-item .di-thumb{height:96px;background:#e9dcc4;display:flex;align-items:center;justify-content:center}
.doc-item .di-thumb img{width:100%;height:100%;object-fit:cover}
.doc-item .di-body{padding:8px 10px}
.doc-item .di-t{font-size:12.5px;font-weight:700;color:var(--c-ink);line-height:1.25}
.doc-item .di-s{font-size:10.5px;color:var(--c-slate);opacity:.7;margin-top:2px}

/* ---------- Misc utilities ---------- */
.muted{color:var(--c-muted)}
.center{text-align:center}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}
.flex{display:flex}.between{justify-content:space-between}.items{align-items:center}.gap8{gap:8px}.gap12{gap:12px}
.wrap{flex-wrap:wrap}
.gold{color:var(--c-gold)}.sand{color:var(--c-sand)}.cream{color:var(--c-cream)}
.fw700{font-weight:700}.fw800{font-weight:800}
.fs12{font-size:12px}.fs13{font-size:13px}.fs16{font-size:16px}.fs20{font-size:20px}
.divider{height:1px;background:var(--c-line);margin:14px 0}
.scroll-y{max-height:340px;overflow-y:auto}
.scroll-y::-webkit-scrollbar{width:6px}
.scroll-y::-webkit-scrollbar-thumb{background:var(--c-slate);border-radius:4px}

/* status pill colors used widely */
.txt-good{color:var(--c-good)}
.txt-bad{color:var(--c-bad)}
.txt-warn{color:var(--c-warn)}

/* ---------- Responsive: tablet/desktop ---------- */
@media(min-width:600px){
  .loan-grid{grid-template-columns:repeat(4,1fr)}
  .stat-row{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:768px){
  .phone-shell{border-left:1px solid var(--c-line);border-right:1px solid var(--c-line)}
}

/* ---------- QR canvas sizing on small ---------- */
.qr-small .qr{width:150px;height:150px}