/* Kas AMQC — satu stylesheet, tanpa framework */
:root{
  --brand:#0f766e; --brand-2:#0d9488; --brand-soft:#ccfbf1;
  --bg:#f4f7f6; --card:#ffffff; --ink:#14231f; --muted:#647a74;
  --line:#e2eae7; --danger:#dc2626; --danger-soft:#fee2e2;
  --warn:#b45309; --warn-soft:#fef3c7; --ok:#15803d; --ok-soft:#dcfce7;
  --radius:16px; --shadow:0 1px 2px rgba(16,40,35,.06), 0 8px 24px -12px rgba(16,40,35,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.5;
  padding-bottom:76px;
}
a{color:var(--brand); text-decoration:none}
h1,h2,h3{margin:0 0 .5rem; line-height:1.25}
h1{font-size:1.4rem}
h2{font-size:1.1rem}
p{margin:.35rem 0}

/* ---------- Topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.7rem 1rem; background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff; position:sticky; top:0; z-index:20; box-shadow:0 2px 12px rgba(15,118,110,.25);
}
.brand{display:flex; align-items:center; gap:.55rem; color:#fff; font-weight:700; letter-spacing:.2px}
.brand-mark{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.2); font-size:15px; font-weight:800;
}
.brand-text{font-size:1.05rem}
.topbar-user{display:flex; align-items:center; gap:.5rem; font-size:.82rem}
.topbar-name{max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.95}
.chip-role{background:rgba(255,255,255,.18); padding:.15rem .5rem; border-radius:999px; font-size:.72rem; text-transform:uppercase; letter-spacing:.4px}
.btn-logout{
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); color:#fff;
  padding:.22rem .55rem; border-radius:8px; font-size:.76rem; font-weight:700; text-decoration:none;
}
.btn-logout:hover{background:rgba(255,255,255,.32); color:#fff}
@media(max-width:560px){
  .hide-sm{display:none}
  .topbar-name{max-width:92px}
  .btn-logout{padding:.2rem .45rem}
  table{font-size:.78rem}
  th,td{padding:.42rem .38rem}
  /* 7 menu terlalu lebar untuk HP: bungkus jadi 2 baris, semua tetap terlihat */
  .tabbar{flex-wrap:wrap; overflow:visible; gap:.2rem}
  .tabbar a{flex:1 1 22%; min-width:0; font-size:.74rem; padding:.45rem .2rem}
}@media(max-width:430px){
  .topbar-name{display:none}
  .brand-text{font-size:.95rem}
  .tabbar a{font-size:.72rem; padding:.42rem .15rem}
}

/* ---------- Tab bar ---------- */
.tabbar{
  display:flex; gap:.25rem; background:var(--card); border-bottom:1px solid var(--line);
  padding:.35rem .4rem; overflow-x:auto; position:sticky; top:50px; z-index:15;
}
.tabbar a{
  flex:1; min-width:74px; text-align:center; padding:.5rem .4rem; border-radius:10px;
  color:var(--muted); font-size:.82rem; font-weight:600; white-space:nowrap; position:relative;
}
.tabbar a.active{background:var(--brand-soft); color:var(--brand)}
.badge{
  display:inline-block; min-width:18px; padding:0 5px; margin-left:4px; border-radius:999px;
  background:var(--danger); color:#fff; font-size:.68rem; line-height:18px; vertical-align:middle;
}

/* ---------- Layout ---------- */
.wrap{max-width:880px; margin:0 auto; padding:1rem 1rem 1.5rem}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); margin-bottom:1rem}
.card.tight{padding:.8rem}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.75rem}
.card-head h2{margin:0}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.tiny{font-size:.75rem}
.center{text-align:center}
.right{text-align:right}
.mt{margin-top:1rem}
.mb{margin-bottom:1rem}
.row{display:flex; gap:.6rem; flex-wrap:wrap}
.row>*{flex:1 1 160px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem}
@media(max-width:560px){.grid-3{grid-template-columns:1fr 1fr}}

/* ---------- Stat ---------- */
.stat{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:.8rem}
.stat .label{font-size:.74rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted)}
.stat .value{font-size:1.25rem; font-weight:750; margin-top:.15rem; letter-spacing:-.3px}
.stat.danger{border-color:#fbcaca; background:linear-gradient(180deg,#fff,#fff6f6)}
.stat.danger .value{color:var(--danger)}
.stat.ok{border-color:#bbf7d0; background:linear-gradient(180deg,#fff,#f4fff8)}
.stat.ok .value{color:var(--ok)}
.stat.brand .value{color:var(--brand)}

/* ---------- Hero member ---------- */
.hero{
  background:linear-gradient(135deg,#0f766e,#10b981); color:#fff; border-radius:18px;
  padding:1.1rem 1.2rem; box-shadow:0 10px 30px -18px rgba(15,118,110,.9); margin-bottom:1rem;
}
.hero .lbl{font-size:.78rem; opacity:.85; text-transform:uppercase; letter-spacing:.6px}
.hero .big{font-size:1.9rem; font-weight:800; letter-spacing:-.6px; line-height:1.15; margin:.15rem 0 .35rem}
.hero .sub{font-size:.86rem; opacity:.92}

/* ---------- Forms ---------- */
label{display:block; font-size:.8rem; font-weight:650; color:var(--muted); margin:.6rem 0 .25rem}
input[type=text],input[type=password],input[type=date],input[type=number],input[type=tel],select,textarea{
  width:100%; padding:.6rem .7rem; border:1px solid var(--line); border-radius:10px;
  background:#fff; font:inherit; color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-soft); border-color:var(--brand-2)}
input[type=file]{width:100%; font-size:.85rem; padding:.4rem 0}
.pw-wrap{display:flex; gap:.4rem; align-items:center}
.pw-wrap input{flex:1}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.62rem 1rem; border-radius:11px; border:1px solid transparent; background:var(--brand);
  color:#fff; font:inherit; font-weight:650; cursor:pointer; text-decoration:none;
}
.btn:hover{background:var(--brand-2)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn-block{width:100%}
.btn-ghost{background:#fff; color:var(--brand); border-color:var(--line)}
.btn-ghost:hover{background:var(--brand-soft); color:var(--brand)}
.btn-danger{background:var(--danger)}
.btn-danger:hover{background:#b91c1c}
.btn-ok{background:var(--ok)}
.btn-ok:hover{background:#166534}
.btn-sm{padding:.35rem .6rem; font-size:.8rem; border-radius:9px}
.inline{display:inline}

/* ---------- Alerts ---------- */
.alert{padding:.7rem .85rem; border-radius:11px; margin-bottom:.9rem; font-size:.88rem; border:1px solid transparent}
.alert-success{background:var(--ok-soft); border-color:#bbf7d0; color:#14532d}
.alert-error{background:var(--danger-soft); border-color:#fbcaca; color:#7f1d1d}
.alert-info{background:#e0f2fe; border-color:#bae6fd; color:#075985}
.alert-warn{background:var(--warn-soft); border-color:#fde68a; color:#78350f}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto; margin:0 -.2rem; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:.85rem}
th,td{padding:.55rem .5rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle}
th{font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); background:#fafcfb}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right; white-space:nowrap}
tr.sel{background:#f0fdfa}

/* ---------- Pills ---------- */
.pill{display:inline-block; padding:.15rem .5rem; border-radius:999px; font-size:.72rem; font-weight:650; white-space:nowrap}
.pill.ok{background:var(--ok-soft); color:#14532d}
.pill.warn{background:var(--warn-soft); color:#78350f}
.pill.bad{background:var(--danger-soft); color:#7f1d1d}
.pill.info{background:#e0f2fe; color:#075985}

/* ---------- Month picker ---------- */
.months{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:.45rem; margin-top:.4rem}
.month-opt{position:relative}
.month-opt input{position:absolute; opacity:0; width:0; height:0}
.month-opt span{
  display:block; text-align:center; padding:.5rem .25rem; border:1px solid var(--line);
  border-radius:10px; font-size:.8rem; font-weight:600; cursor:pointer; background:#fff; color:var(--muted);
}
.month-opt input:checked + span{background:var(--brand); border-color:var(--brand); color:#fff}
.month-opt input:focus-visible + span{outline:2px solid var(--brand-2); outline-offset:1px}

/* ---------- Payment step ---------- */
.paybox{border:2px dashed var(--brand-soft); border-radius:16px; padding:1rem; background:#f7fdfc}
.qr{max-width:220px; width:100%; border-radius:12px; border:1px solid var(--line); background:#fff; padding:6px; display:block; margin:.5rem auto}
.norek{
  font-family:ui-monospace,Consolas,monospace; font-size:1.15rem; font-weight:700; letter-spacing:.5px;
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:.5rem .7rem;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.total-box{background:#fff; border:1px solid var(--line); border-radius:12px; padding:.7rem .9rem; margin:.6rem 0}
.total-box .v{font-size:1.5rem; font-weight:800; color:var(--brand)}

/* ---------- Bukti thumb ---------- */
.thumb{max-width:120px; border-radius:8px; border:1px solid var(--line); display:block}
.proof{max-width:100%; border-radius:10px; border:1px solid var(--line); margin-top:.5rem}

/* ---------- List rows ---------- */
.rowitem{display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.6rem 0; border-bottom:1px solid var(--line)}
.rowitem:last-child{border-bottom:0}
.rowitem .who{font-weight:650}
.rowitem .meta{font-size:.78rem; color:var(--muted)}

/* ---------- Empty ---------- */
.empty{text-align:center; padding:1.6rem .5rem; color:var(--muted); font-size:.88rem}

/* ---------- Transaksi: kartu di HP, tabel di desktop ---------- */
.txlist{display:none}
.table-only{display:block}
.txcard{display:flex; justify-content:space-between; gap:.6rem; padding:.7rem .35rem; border-bottom:1px solid var(--line)}
.txcard:last-child{border-bottom:0}
.tx-main{min-width:0}
.tx-uraian{font-weight:650; font-size:.9rem; word-break:break-word; line-height:1.3}
.tx-right{text-align:right; flex:0 0 auto}
.tx-amount{font-weight:800; font-size:.92rem; white-space:nowrap}
.tx-amount.masuk{color:var(--ok)}
.tx-amount.keluar{color:var(--danger)}
.tx-actions{display:flex; gap:.3rem; margin-top:.3rem; justify-content:flex-end}
@media(max-width:680px){
  .txlist{display:block}
  .table-only{display:none}
}
.mlist{display:none}
@media(max-width:680px){
  .mlist{display:block}
}
.mcard{padding:.7rem .35rem; border-bottom:1px solid var(--line)}
.mcard:last-child{border-bottom:0}
.mcard-top{display:flex; justify-content:space-between; gap:.6rem; align-items:flex-start}

/* ---------- Footer ---------- */
.foot{
  max-width:880px; margin:0 auto; padding:1rem; display:flex; justify-content:space-between;
  font-size:.78rem; color:var(--muted); border-top:1px solid var(--line);
}

/* ---------- Peringatan auto logout ---------- */
.idle-warn{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  background:#78350f; color:#fff; padding:.75rem 1rem; font-size:.86rem;
  box-shadow:0 -6px 24px rgba(0,0,0,.25); animation:slideUp .25s ease-out;
}
.idle-warn[hidden]{display:none}
.idle-warn strong{font-size:1rem}
.idle-warn .btn{background:#fff; color:#78350f; border:0; white-space:nowrap; flex:0 0 auto}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ---------- Cetak / PDF ---------- */
@media print{
  .topbar,.tabbar,.foot,.no-print,.alert{display:none !important}
  body{background:#fff; padding:0; font-size:11pt}
  .wrap{max-width:none; padding:0}
  .card{box-shadow:none; border:0; padding:0; margin:0 0 10pt; page-break-inside:auto}
  .table-only{display:block !important}
  .txlist,.mlist{display:none !important}
  .table-wrap{overflow:visible !important}
  table{font-size:9pt}
  th{background:#eee !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  a{color:#000; text-decoration:none}
  h2{font-size:12pt}
  @page{margin:12mm}
}

/* ---------- Login ---------- */
body.login{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1rem; background:linear-gradient(160deg,#0f766e,#065f56 60%,#0b3b36)}
.login-card{width:100%; max-width:380px; background:#fff; border-radius:20px; padding:1.5rem; box-shadow:0 24px 60px -24px rgba(0,0,0,.5)}
.login-logo{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-size:24px;font-weight:800;margin:0 auto .7rem}
.login-card h1{text-align:center; font-size:1.25rem}
.login-hint{font-size:.78rem; color:var(--muted); text-align:center; margin-top:.9rem}
body.login .foot{display:none}
body.login{padding-bottom:1rem}

@media(min-width:720px){
  body{padding-bottom:1.5rem}
  .tabbar{position:static; justify-content:flex-start; border-radius:12px; margin:1rem auto 0; max-width:880px; border:1px solid var(--line)}
  .tabbar a{flex:0 0 auto; min-width:110px}
}