:root{--bg:#f7f7f7;--card:#fff;--border:#e5e7eb;--muted:#6b7280;--ink:#111827;--accent:#111}
*{box-sizing:border-box} body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--ink)}
.container{max-width:1100px;margin:0 auto;padding:24px;display:grid;gap:20px}
.header{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.title{font-size:28px;font-weight:800}.subtitle{color:var(--muted);font-size:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.actions .import{position:relative;overflow:hidden;border:1px solid var(--border);padding:8px 12px;border-radius:12px;background:#fff;cursor:pointer}
.actions .import input{position:absolute;inset:0;opacity:0;cursor:pointer}
.actions button{border:1px solid var(--border);padding:8px 12px;border-radius:12px;background:#fff;cursor:pointer}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px}
.card.green{background:#e8f5e9;border-color:#c8e6c9}
.value{font-weight:700;font-size:20px}.value.big{font-size:26px}
.muted{color:var(--muted)}

.field{display:grid;gap:4px;margin-bottom:8px}
.field-label{display:block;font-size:12px;color:#6b7280}
.field input,.field select{border:1px solid #e5e7eb;border-radius:12px;padding:8px 10px;background:#fff;color:#111827}

/* thumbnail bukti */
.thumb{
  max-height: 1px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
}
/* agar sel tabel bukti tidak “meloncat” */
.table .break { white-space: nowrap; }


/* Paksa kolom bukti sempit */
.table td.proof-cell {
  width: 120px;          /* sempitkan kolom */
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
}

/* Pastikan link tidak melebar */
.table td.proof-cell a {
  display: inline-block;
  max-width: 110px;
}

/* Paksa ukuran gambar kecil */
.table td.proof-cell img.thumb {
  width: 80px !important;     /* <<< ukuran fix */
  height: 50px !important;    /* <<< ukuran fix */
  max-width: 80px !important;
  max-height: 50px !important;
  object-fit: cover !important;
  display: block;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

/* Paksa kolom bukti sempit */
.table td.proof-cell {
  width: 120px;          /* sempitkan kolom */
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
}

/* Pastikan link tidak melebar */
.table td.proof-cell a {
  display: inline-block;
  max-width: 110px;
}

/* Paksa ukuran gambar kecil */
.table td.proof-cell img.thumb {
  width: 80px !important;     /* <<< ukuran fix */
  height: 50px !important;    /* <<< ukuran fix */
  max-width: 80px !important;
  max-height: 50px !important;
  object-fit: cover !important;
  display: block;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.card[role="button"] { cursor:pointer; }
.card[role="button"]:hover { box-shadow:0 2px 10px rgba(0,0,0,.06); }


/* Thumbnail bukti (default / desktop) */
.receipt-thumb{
  max-width: 80px;
  max-height: 50px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border: 1px solid #eee;
  border-radius: 8px;
}

/* Kolom bukti biar ada batasnya */
.proof-col{
  width: 120px;        /* batas lebar kolom di desktop */
}




.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabs button{border:1px solid var(--border);padding:8px 12px;border-radius:12px;background:#fff;cursor:pointer}
.tabs button.active{background:#111;color:#fff}

.section{display:grid;gap:10px}.section-title{font-weight:700}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid var(--border);padding:8px 10px;font-size:14px;background:#fff}
.table th{background:#f3f4f6;text-align:left}
.table .right{text-align:right}.table .break{word-break:break-all}
.table-wrap{overflow:auto}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.panel{background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px}
.panel-title{font-weight:600;margin-bottom:6px}
.list .row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;font-size:14px}
.strong{font-weight:700}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.gridForm{display:grid;grid-template-columns:1fr 2fr;gap:12px}
.box{background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px}
.box-title{font-weight:600;margin-bottom:8px}
.field{display:grid;gap:4px;margin-bottom:8px}
.field span{font-size:12px;color:var(--muted)}
.field input,.field select{border:1px solid var(--border);border-radius:12px;padding:8px 10px}

button.primary{background:var(--accent);color:#fff;border:none;border-radius:12px;padding:10px 12px;cursor:pointer}
.link{color:#2563eb;text-decoration:underline}

.pill{padding:2px 8px;border-radius:999px;font-size:12px}
.pill.ok{background:#dcfce7;color:#166534}
.pill.bad{background:#fee2e2;color:#991b1b}

.editable .row{display:flex;gap:8px}
.editable input{flex:1;border:1px solid var(--border);border-radius:12px;padding:8px 10px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{background:#f3f4f6;border:1px solid var(--border);border-radius:999px;padding:4px 10px;display:flex;gap:6px;align-items:center}
.tip{color:var(--muted);font-size:12px}
@media (max-width:900px){.gridForm{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}.cards{grid-template-columns:1fr}}


/* Thumbnail bukti (default / desktop) */
.receipt-thumb{
  max-width: 120px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border: 1px solid #eee;
  border-radius: 8px;
}

/* Kolom bukti biar ada batasnya */
.proof-col{
  width: 120px;        /* batas lebar kolom di desktop */
}

/* --- Mobile --- */
@media (max-width: 768px){
  .receipt-thumb{
    max-width: 72px;   /* kecilin di HP */
    max-height: 48px;
  }
  .proof-col{
    width: 86px;       /* kecilin kolomnya juga */
  }
  .table td, .table th{
    padding: 6px 8px;
    font-size: 13px;
  }
}

/* Extra kecil (≤420px) */
@media (max-width: 420px){
  .receipt-thumb{ max-width: 64px; max-height: 42px; }
  .proof-col{ width: 76px; }
}

.receipt-thumb{ width:auto !important; height:auto !important; }



.mp-wrap .row.gap { display:flex; gap:8px; margin-bottom:6px; }
.mp-wrap .chips { display:flex; gap:6px; flex-wrap:wrap; }
.mp-chip { display:flex; align-items:center; gap:6px; border:1px solid #e8e8e8; padding:4px 6px; border-radius:999px; background:#fafafa; }
.mp-chip .nm { font-weight:600; }
.mp-chip .mp-amt { width:90px; border:1px solid #ddd; border-radius:6px; padding:2px 6px; }
.mp-chip .x { border:none; background:transparent; cursor:pointer; }
.pill { display:inline-block; padding:2px 8px; border-radius:999px; background:#f2f4f7; margin-right:4px; font-size:12px; }

.thumb { max-height: 72px; border-radius: 6px; display:block; }
.thumb-sm { max-height: 48px; }
.proof-cell { min-width: 80px; }

.proof-cell { min-width: 90px; }
.thumb      { max-height: 72px; border-radius: 6px; display: block; }
.thumb-sm   { max-height: 48px; }
.row-blink  { outline: 2px solid #22c55e; animation: flash 1s ease-in-out 2; }
@keyframes flash { from { background:#dcfce7; } to { background:transparent; } }