@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#F3F1E7;
  --paper-deep:#EAE5D5;
  --ink:#232420;
  --ink-soft:#6B695D;
  --border:#D9D3C0;
  --navy:#1F3B4D;
  --navy-soft:#2E5068;
  --green:#2F6F4F;
  --green-bg:#E7F1EA;
  --amber:#92621C;
  --amber-bg:#FBF1DE;
  --red:#9B3A2E;
  --red-bg:#FBEAE6;
  --font-serif:'Fraunces',serif;
  --font-sans:'IBM Plex Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  min-height:100vh;
}

.app{
  max-width:1040px;
  margin:0 auto;
  padding:40px 24px 80px;
}

/* header */
.app-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:32px;
  border-bottom:1px solid var(--border);
  padding-bottom:20px;
}
.wordmark{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  font-size:28px;
  color:var(--navy);
}
.wordmark span{
  display:block;
  font-family:var(--font-mono);
  font-style:normal;
  font-size:12px;
  letter-spacing:.02em;
  color:var(--ink-soft);
  margin-top:2px;
}
.header-right{
  display:flex;
  align-items:center;
  gap:18px;
}
.who{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-soft);
}
.logout-link{
  font-size:12.5px;
  color:var(--navy);
  text-decoration:underline;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
  font-family:var(--font-sans);
}

/* stepper */
.stepper{
  display:flex;
  align-items:center;
  gap:10px;
}
.step-pill{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--ink-soft);
}
.step-dot{
  width:22px;height:22px;
  border-radius:50%;
  border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-soft);
  background:#fff;
}
.step-pill.done .step-dot{background:var(--navy);border-color:var(--navy);color:#fff;}
.step-pill.active .step-dot{border-color:var(--navy);color:var(--navy);font-weight:600;}
.step-pill.active span{color:var(--ink);font-weight:600;}
.step-line{width:24px;height:1px;background:var(--border);}

/* cards */
.card{
  background:#fff;
  border:1px solid var(--border);
}

.import-card{
  padding:56px 40px;
  text-align:center;
}
.import-card h1{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:26px;
  margin:0 0 10px;
}
.import-card p{
  color:var(--ink-soft);
  font-size:14.5px;
  max-width:440px;
  margin:0 auto 32px;
  line-height:1.5;
}
.import-actions{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}
.btn{
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:600;
  padding:13px 22px;
  border-radius:3px;
  border:1px solid var(--navy);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.btn-primary{
  background:var(--navy);
  color:#fff;
}
.btn-primary:hover{background:var(--navy-soft);}
.btn-secondary{
  background:#fff;
  color:var(--navy);
}
.btn-secondary:hover{background:var(--paper-deep);}
.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.import-note{
  margin-top:28px;
  font-size:12.5px;
  color:var(--ink-soft);
  font-family:var(--font-mono);
}

/* login */
.login-card{
  max-width:420px;
  margin:0 auto;
}
.login-form{
  text-align:left;
  max-width:300px;
  margin:0 auto;
}
.field{margin-bottom:16px;}
.field label{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.03em;
  color:var(--ink-soft);
  margin-bottom:6px;
}
.field input{
  width:100%;
  font-family:var(--font-sans);
  font-size:14px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:2px;
  background:var(--paper);
  color:var(--ink);
}
.field input:focus{
  outline:none;
  border-color:var(--navy);
  background:#fff;
}
.login-form .btn{width:100%;margin-top:4px;}

.alert{
  padding:10px 12px;
  font-size:13px;
  border:1px solid var(--red);
  background:var(--red-bg);
  color:var(--red);
  margin-bottom:16px;
}

/* loading */
.loading-card{
  padding:70px 40px;
  text-align:center;
  color:var(--ink-soft);
  font-family:var(--font-mono);
  font-size:13px;
}
.spinner{
  width:26px;height:26px;
  border:2px solid var(--border);
  border-top-color:var(--navy);
  border-radius:50%;
  margin:0 auto 18px;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* pemberitahuan uji coba */
.dryrun-bar{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:12px 20px;
  background:var(--amber-bg);
  border:1px dashed var(--amber);
  color:var(--amber);
  font-size:13px;
  margin-bottom:18px;
}
.dryrun-bar b{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.dryrun-bar.live{
  background:var(--green-bg);
  border-style:solid;
  border-color:var(--green);
  color:var(--green);
}
.retry-link{
  margin-top:6px;
}

/* summary bar */
.summary-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  background:var(--paper-deep);
  border:1px solid var(--border);
  border-bottom:none;
  font-size:13.5px;
  flex-wrap:wrap;
  gap:12px;
}
.summary-bar .counts{color:var(--ink-soft);}
.summary-bar .counts b{color:var(--ink);font-weight:600;}
.summary-bar .counts .n-review{color:var(--amber);font-weight:600;}
.summary-bar .counts .n-fail{color:var(--red);font-weight:600;}

/* table */
.ledger-wrap{
  overflow-x:auto;
  background-image:repeating-linear-gradient(var(--paper) 0 43px, var(--border) 43px 44px);
  background-attachment:local;
}
table{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
  background:transparent;
}
thead th{
  text-align:left;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:.03em;
  color:var(--ink-soft);
  padding:10px 14px;
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;
}
tbody td{
  padding:10px 14px;
  vertical-align:top;
  border-bottom:1px solid transparent;
}
td.num, th.num{
  font-family:var(--font-mono);
  text-align:right;
  white-space:nowrap;
}
.cell-item .sub{
  color:var(--ink-soft);
  font-size:12px;
  margin-top:2px;
}
.entity-tag{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.04em;
  color:var(--ink-soft);
  background:var(--paper-deep);
  border:1px solid var(--border);
  padding:2px 6px;
  white-space:nowrap;
}

.status-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  font-weight:500;
  white-space:nowrap;
}
.status-tag .dot{
  width:7px;height:7px;
  border-radius:50%;
}
.status-tag.ready .dot{background:var(--green);}
.status-tag.ready{color:var(--green);}
.status-tag.review .dot{background:var(--amber);}
.status-tag.review{color:var(--amber);}

.fix-link{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:var(--navy);
  text-decoration:underline;
  cursor:pointer;
  font-family:var(--font-sans);
  background:none;
  border:none;
  padding:0;
  text-align:left;
}

.fix-row td{
  padding:0 14px 12px;
  background:#fff;
}
.fix-panel{
  padding:12px 14px;
  background:var(--amber-bg);
  border:1px dashed var(--amber);
  font-size:12.5px;
}
.fix-panel .fix-value-group{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:8px 0;
}
.fix-panel .reason-line{
  margin-bottom:4px;
  line-height:1.45;
}
/* Tampil seperti <select> di mockup, tapi bukan kontrol palsu: nilai saran
   ditampilkan apa adanya karena yang diterapkan adalah saran tersimpan. */
.fix-value{
  font-family:var(--font-sans);
  font-size:12.5px;
  padding:6px 8px;
  border:1px solid var(--border);
  background:#fff;
  min-width:220px;
}
.fix-value .label{
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--ink-soft);
  letter-spacing:.03em;
  margin-right:6px;
}
.fix-panel .fix-actions{display:flex;gap:8px;flex-wrap:wrap;}
.fix-panel button{
  font-size:12px;
  padding:6px 10px;
  border-radius:2px;
  cursor:pointer;
  font-family:var(--font-sans);
  font-weight:600;
}
.fix-apply{background:var(--navy);color:#fff;border:1px solid var(--navy);}
.fix-apply:hover{background:var(--navy-soft);}
.fix-skip{background:#fff;color:var(--ink-soft);border:1px solid var(--border);}
.fix-skip:hover{background:var(--paper-deep);}
.fix-panel button:disabled{opacity:.5;cursor:not-allowed;}

/* stamp */
.stamp{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:5px 10px;
  border:1.5px solid var(--amber);
  color:var(--amber);
  transform:rotate(-2deg);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.stamp.sent{
  border-color:var(--green);
  color:var(--green);
}
.stamp.fail{
  border-color:var(--red);
  color:var(--red);
}
.stamp .ref{
  text-transform:none;
  font-weight:400;
  font-size:11px;
  opacity:.85;
  /* Nomor referensi dipakai untuk penelusuran, jangan sampai terpotong baris. */
  white-space:nowrap;
}

/* action bar */
.action-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
  background:#fff;
  border:1px solid var(--border);
  border-top:none;
  flex-wrap:wrap;
  gap:14px;
}
.action-bar .hint{
  font-size:12.5px;
  color:var(--ink-soft);
}

.toast{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  background:var(--ink);
  color:var(--paper);
  font-size:13px;
  padding:12px 18px;
  border-radius:3px;
  max-width:min(560px,90vw);
  box-shadow:0 6px 20px rgba(35,36,32,.22);
}
.toast.error{background:var(--red);}

@media (max-width:640px){
  .app{padding:24px 14px 60px;}
  .app-header{flex-direction:column;align-items:flex-start;gap:16px;}
  .header-right{flex-direction:column;align-items:flex-start;gap:10px;}
}