/* ============================================================
   Credit Manager POS — User Panel Design System  (Natural v4)
   Sleek · pixel-perfect · calm earthy/olive-green UI. No red.
   Loaded AFTER page styles so it harmonises every user page.
   ============================================================ */
:root{
  --cm-gold:#5E7C4F;
  --cm-gold-2:#7FA069;
  --cm-gold-soft:rgba(94,124,79,.14);
  --cm-gold-line:rgba(94,124,79,.35);
  --cm-bg:#F4F1E8;
  --cm-bg-2:#EFEAE0;
  --cm-card:#FFFFFF;
  --cm-card-2:#FAF8F1;
  --cm-card-hover:#F2EEE2;
  --cm-text:#4A4034;
  --cm-text-2:#8A7E6B;
  --cm-text-3:#A89C88;
  --cm-border:rgba(110,95,70,.12);
  --cm-border-2:rgba(110,95,70,.07);
  --cm-success:#3F9E6B;
  --cm-danger:#C9774E;
  --cm-info:#5F8FAE;
  --cm-warning:#C9774E;
  --cm-radius:18px;
  --cm-radius-sm:12px;
  --cm-shadow:0 18px 50px rgba(90,75,55,.10);
  --cm-shadow-sm:0 6px 18px rgba(90,75,55,.08);
  --cm-font:'Inter','Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--cm-font);
  background:
    radial-gradient(1100px 620px at 90% -12%, rgba(94,124,79,.10), transparent 58%),
    radial-gradient(800px 520px at -4% 108%, rgba(95,143,174,.05), transparent 55%),
    radial-gradient(700px 420px at 50% 120%, rgba(127,160,105,.04), transparent 60%),
    var(--cm-bg);
  background-attachment:fixed;
  color:var(--cm-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:.1px;
}
a{color:var(--cm-gold);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--cm-gold-2)}
/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(110,95,70,.30);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(110,95,70,.50);background-clip:padding-box}
/* ---------- App header (light glass) ---------- */
.app-header{
  background:rgba(255,255,255,.86)!important;
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--cm-border)!important;
  position:sticky;top:0;z-index:50;
  box-shadow:0 4px 20px rgba(110,95,70,.06);
  padding-top:env(safe-area-inset-top,0);
}
.header-title{color:var(--cm-text)!important;font-weight:800;font-size:17px;letter-spacing:.2px}
.header-avatar{background:linear-gradient(135deg,var(--cm-gold),var(--cm-gold-2))!important;color:#fff!important;font-weight:800}
.header-action-btn{
  background:rgba(110,95,70,.06)!important;border:1px solid var(--cm-border)!important;
  color:var(--cm-text-2)!important;border-radius:12px!important;transition:all .18s ease;font-size:14px;
}
.header-action-btn:hover{color:var(--cm-gold)!important;border-color:var(--cm-gold-line)!important;background:var(--cm-gold-soft)!important}
/* ---------- Balance hero (light) ---------- */
.balance-hero{
  background:linear-gradient(150deg,rgba(255,255,255,.98),rgba(244,241,232,.98))!important;
  border:1px solid var(--cm-gold-line)!important;
  border-left:4px solid var(--cm-gold)!important;
  border-radius:var(--cm-radius)!important;
  box-shadow:var(--cm-shadow)!important;
  position:relative;overflow:hidden;
  backdrop-filter:blur(6px);
}
.balance-hero::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:linear-gradient(90deg,var(--cm-gold),var(--cm-gold-2),transparent)}
.balance-label{color:var(--cm-text-2)!important;font-size:12px;text-transform:uppercase;letter-spacing:1px;font-weight:600}
.balance-amount{color:var(--cm-text)!important;font-weight:900;letter-spacing:-1px}
.balance-status{border-radius:999px!important;padding:5px 14px!important;font-weight:700;font-size:12px}
.balance-status.settled{background:rgba(63,158,107,.14)!important;color:var(--cm-success)!important}
.balance-status.owe{background:rgba(201,119,78,.14)!important;color:var(--cm-danger)!important}
.balance-status.advance{background:rgba(178,140,84,.16)!important;color:var(--cm-warning)!important}
.balance-copy-btn{background:var(--cm-gold-soft)!important;color:var(--cm-gold)!important;border-radius:10px!important}
/* ---------- Quick stats ---------- */
.quick-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.quick-stat{
  background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(244,241,232,.98))!important;
  border:1px solid var(--cm-border)!important;border-radius:var(--cm-radius-sm)!important;
  padding:16px!important;box-shadow:var(--cm-shadow-sm)!important;
  backdrop-filter:blur(6px);
  transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .22s ease;
  position:relative;overflow:hidden;
}
.quick-stat:hover{transform:translateY(-3px);border-color:var(--cm-gold-line)!important}
.quick-stat.credit .quick-stat-icon{color:var(--cm-success)!important;background:rgba(63,158,107,.12)!important}
.quick-stat.paid .quick-stat-icon{color:var(--cm-gold)!important;background:var(--cm-gold-soft)!important}
.quick-stat-label{color:var(--cm-text-2)!important;font-size:12px}
.quick-stat-value{color:var(--cm-text)!important;font-weight:800;font-size:20px;letter-spacing:-.4px}
/* ---------- Sections ---------- */
.section,.monthly-card,.filter-sheet,.tx-list,.balance-hero{
  background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(244,241,232,.98))!important;
  border:1px solid var(--cm-border)!important;border-radius:var(--cm-radius)!important;
  box-shadow:var(--cm-shadow-sm)!important;
  backdrop-filter:blur(6px);
  position:relative;overflow:hidden;
}
.section::before,.monthly-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(94,124,79,.24),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .25s ease;pointer-events:none;
}
.section:hover::before,.monthly-card:hover::before{opacity:1}
.section-title,.monthly-title,.filter-title,.tx-header{color:var(--cm-text)!important;font-weight:700;letter-spacing:.2px}
.section-link{color:var(--cm-gold)!important;font-weight:600}
/* ---------- Transactions ---------- */
.tx-item{border-bottom:1px solid var(--cm-border-2)!important;padding:14px 4px!important;transition:background .15s ease}
.tx-item:hover{background:rgba(94,124,79,.06)!important}
.tx-icon{color:#fff!important}
.tx-icon.credit{background:rgba(63,158,107,.15)!important;color:var(--cm-success)!important}
.tx-icon.paid{background:var(--cm-gold-soft)!important;color:var(--cm-gold)!important}
.tx-amount.credit{color:var(--cm-success)!important;font-weight:800}
.tx-amount.paid{color:var(--cm-text)!important;font-weight:800}
.tx-date{color:var(--cm-text-3)!important;font-size:11px}
.tx-empty{color:var(--cm-text-3)!important;text-align:center;padding:30px}
/* ---------- Bottom nav (light glass) ---------- */
.bottom-nav{
  background:rgba(255,255,255,.92)!important;
  backdrop-filter:blur(14px);
  border-top:1px solid var(--cm-border)!important;
  box-shadow:0 -6px 24px rgba(110,95,70,.10);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.bottom-nav-item{color:var(--cm-text-3)!important;font-weight:600;font-size:11px;transition:color .15s ease}
.bottom-nav-item.active{color:var(--cm-gold)!important}
.bottom-nav-item.active i{color:var(--cm-gold)!important;text-shadow:0 0 12px rgba(94,124,79,.5)}
.bottom-nav-item i{font-size:18px}
/* ---------- Filter chips ---------- */
.filter-types{display:flex;gap:8px}
.filter-type{
  border:1px solid var(--cm-border)!important;background:rgba(110,95,70,.05)!important;
  color:var(--cm-text-2)!important;border-radius:999px!important;padding:8px 16px!important;font-weight:600;font-size:12px;
  transition:all .18s ease;
}
.filter-type:hover{border-color:var(--cm-gold-line)!important;color:var(--cm-text)!important}
.filter-type.active-all{background:var(--cm-gold-soft)!important;color:var(--cm-gold)!important;border-color:var(--cm-gold-line)!important}
.filter-type.active-credit{background:rgba(63,158,107,.14)!important;color:var(--cm-success)!important;border-color:rgba(63,158,107,.25)!important}
.filter-type.active-paid{background:var(--cm-gold-soft)!important;color:var(--cm-gold)!important;border-color:var(--cm-gold-line)!important}
.filter-btn.apply{background:linear-gradient(135deg,var(--cm-gold),var(--cm-gold-2))!important;color:#fff!important;border:none!important;font-weight:700;border-radius:12px!important}
.filter-btn.reset{background:rgba(110,95,70,.06)!important;color:var(--cm-text-2)!important;border:1px solid var(--cm-border)!important;border-radius:12px!important}
/* ---------- Pagination ---------- */
.pagination{display:flex;gap:8px;justify-content:center;margin-top:16px}
.page-link{background:rgba(110,95,70,.06)!important;border:1px solid var(--cm-border)!important;color:var(--cm-text-2)!important;border-radius:10px!important;padding:8px 14px!important;font-weight:600;transition:all .15s ease}
.page-link:hover{color:var(--cm-gold)!important;border-color:var(--cm-gold-line)!important}
.page-link.active{background:linear-gradient(135deg,var(--cm-gold),var(--cm-gold-2))!important;color:#fff!important;border:none!important}
/* ---------- Action buttons ---------- */
.action-btn{border-radius:12px!important;font-weight:600!important;border:none;transition:transform .15s ease,box-shadow .15s ease}
.action-btn.primary{background:linear-gradient(135deg,var(--cm-gold),var(--cm-gold-2))!important;color:#fff!important;box-shadow:0 8px 22px rgba(94,124,79,.30)!important}
.action-btn.primary:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(94,124,79,.45)!important}
.action-btn.secondary{background:rgba(110,95,70,.06)!important;color:var(--cm-text)!important;border:1px solid var(--cm-border)!important}
.action-btn.secondary:hover{background:#fff!important;border-color:var(--cm-gold-line)!important}
/* ---------- Forms ---------- */
.form-input,.form-control,input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  background:rgba(255,255,255,.8)!important;
  border:1px solid var(--cm-border)!important;
  border-radius:var(--cm-radius-sm)!important;
  color:var(--cm-text)!important;
  padding:13px 15px!important;font-size:14px!important;
  transition:border-color .15s ease,box-shadow .15s ease!important;outline:none;
}
.form-input:focus,.form-control:focus,input:focus,select:focus,textarea:focus{border-color:var(--cm-gold)!important;box-shadow:0 0 0 4px var(--cm-gold-soft)!important}
.form-input::placeholder,.form-control::placeholder{color:var(--cm-text-3)!important}
/* ---------- Entry animation ---------- */
@keyframes cmRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.balance-hero,.quick-stat,.section,.monthly-card{animation:cmRise .5s cubic-bezier(.22,1,.36,1) both}
/* ---------- Mobile ---------- */
@media(max-width:768px){
  .quick-stats{grid-template-columns:1fr 1fr}
}