/* ============================================================
   Invoiceku — dashboard invoice Iqbal Bayhaqi
   Identitas mengikuti desain invoice: monokrom, Poppins,
   display ekstra-tebal, gelombang abu-abu sebagai signature.
   ============================================================ */

:root {
  --ink: #161616;
  --ink-soft: #3e3e3e;
  --muted: #6e6e6e;
  --faint: #9a9a9a;
  --line: #e4e4e1;
  --bg: #f3f3f0;
  --paper: #ffffff;
  --wave-light: #d9d9d9;
  --wave-dark: #3e3e3e;
  --radius: 10px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* ---------- Kerangka aplikasi ---------- */

.app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}

.brand { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.brand-mark {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  line-height: 1.35; text-transform: uppercase;
}
.brand-sub {
  font-size: 12px; color: var(--muted);
  border-left: 1px solid var(--line); padding-left: 14px;
}

.topbar-actions { display: flex; gap: 10px; }

main { flex: 1; padding: 28px 32px 60px; max-width: 1280px; width: 100%; margin: 0 auto; }

/* ---------- Tombol ---------- */

.btn {
  border: 1px solid transparent; border-radius: 999px;
  padding: 9px 18px; font-weight: 500; font-size: 13px;
  background: transparent; color: var(--ink);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink-soft); }
.btn-ghost { border-color: var(--line); background: var(--paper); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-danger { border-color: var(--line); background: var(--paper); color: #b3261e; }
.btn-danger:hover { border-color: #b3261e; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Toolbar dashboard ---------- */

.toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.toolbar input[type="search"] {
  flex: 1; min-width: 220px; max-width: 340px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; background: var(--paper);
}
.toolbar select {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 14px; background: var(--paper);
}
.toolbar-summary {
  margin-left: auto; font-size: 13px; color: var(--muted);
}
.toolbar-summary b { color: var(--ink); font-weight: 600; }

/* ---------- Tabel invoice ---------- */

.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}

.inv-table { width: 100%; border-collapse: collapse; }
.inv-table th {
  text-align: left; font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  background: #fafaf8;
}
.inv-table td { padding: 16px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.inv-table tr:last-child td { border-bottom: none; }
.inv-table tbody tr { transition: background 0.1s; }
.inv-table tbody tr:hover { background: #fafaf8; }

.td-no { font-weight: 600; white-space: nowrap; }
.td-client { font-weight: 500; }
.td-client small { display: block; color: var(--muted); font-weight: 400; margin-top: 2px; }
.td-amount { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.td-date { color: var(--muted); white-space: nowrap; }
.td-actions { text-align: right; white-space: nowrap; }

.row-btn {
  border: 1px solid var(--line); background: var(--paper);
  border-radius: 7px; padding: 6px 10px; font-size: 12px;
  margin-left: 6px; color: var(--ink);
}
.row-btn:hover { border-color: var(--ink); }
.row-btn.danger:hover { border-color: #b3261e; color: #b3261e; }

.badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; border-radius: 999px; padding: 5px 12px;
}
.badge-paid { background: var(--ink); color: #fff; }
.badge-unpaid { border: 1px solid var(--ink); color: var(--ink); }
.badge-draft { background: #ececea; color: var(--muted); }

/* ---------- Empty state ---------- */

.empty {
  text-align: center; padding: 90px 20px 100px;
}
.empty-title {
  font-size: 64px; font-weight: 800; letter-spacing: -0.02em;
  color: #e3e3e0; line-height: 1; user-select: none;
}
.empty p { color: var(--muted); margin: 16px 0 24px; }

/* ---------- Editor ---------- */

.editor { display: grid; grid-template-columns: 430px 1fr; gap: 24px; align-items: start; }

.editor-form {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.editor-form h2 { font-size: 16px; font-weight: 700; margin-bottom: 18px; }

.form-section { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
.form-section-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}

.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--ink); outline: none;
}
.field textarea { resize: vertical; min-height: 60px; }

.field-hint { font-size: 11px; color: var(--faint); margin-top: 5px; }

.pay-row {
  display: grid; grid-template-columns: 1fr 28px; gap: 8px;
  margin-bottom: 8px; align-items: center;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-row-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }

/* baris item */
.item-row {
  display: grid; grid-template-columns: 1fr 56px 110px 28px; gap: 8px;
  margin-bottom: 8px; align-items: start;
}
.item-row input, .item-row textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 10px; background: #fff;
}
.item-row input:focus, .item-row textarea:focus { border-color: var(--ink); outline: none; }
.item-row textarea { min-height: 42px; resize: none; overflow: hidden; }
.item-row input { text-align: right; }
.item-row input.item-qty {
  text-align: center; -moz-appearance: textfield; appearance: textfield;
}
.item-row input.item-qty::-webkit-outer-spin-button,
.item-row input.item-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.item-remove {
  border: none; background: none; color: var(--faint);
  font-size: 18px; line-height: 1; padding: 10px 4px;
}
.item-remove:hover { color: #b3261e; }
.item-add {
  border: 1px dashed var(--line); background: none; width: 100%;
  border-radius: 8px; padding: 9px; color: var(--muted); font-size: 13px;
}
.item-add:hover { border-color: var(--ink); color: var(--ink); }

.editor-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* ---------- Preview ---------- */

.preview-pane { position: sticky; top: 86px; }
.preview-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.preview-wrap { overflow: hidden; }
.preview-scale {
  transform-origin: top left;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   LEMBAR INVOICE — replika desain PDF (A4: 794 × 1123 px @96dpi)
   ============================================================ */

.sheet {
  width: 794px; height: 1123px;
  background: #fff; color: #1d1d1d;
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
  position: relative; overflow: hidden;
}

.sheet-inner { padding: 84px 88px 0; position: relative; z-index: 1; }

.sh-head { display: flex; justify-content: space-between; align-items: flex-start; }
.sh-name {
  font-size: 15px; font-weight: 600; letter-spacing: 0.14em;
  line-height: 1.5; text-transform: uppercase;
}
.sh-no { font-size: 15px; color: #4a4a4a; letter-spacing: 0.04em; }

.sh-title {
  font-size: 88px; font-weight: 800; letter-spacing: -0.015em;
  line-height: 1; margin-top: 52px; text-transform: uppercase;
}

.sh-date { margin-top: 38px; font-size: 15px; }
.sh-date b { font-weight: 700; margin-right: 10px; }

.sh-parties {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  margin-top: 36px; font-size: 15px; line-height: 1.65;
}
.sh-party-head { font-weight: 700; margin-bottom: 4px; }

.sh-table { width: 100%; border-collapse: collapse; margin-top: 30px; font-size: 15px; }
.sh-table thead th {
  background: #ececec; color: #3d3d3d; font-weight: 500;
  text-align: right; padding: 13px 18px;
}
.sh-table thead th:first-child { text-align: left; }
.sh-table tbody td { padding: 22px 18px 8px; text-align: right; vertical-align: top; }
.sh-table tbody td:first-child { text-align: left; line-height: 1.65; }
.sh-table tbody td { white-space: nowrap; }
.sh-table tbody td:first-child { white-space: normal; width: 46%; }

.sh-total {
  display: flex; justify-content: flex-end; gap: 40px;
  border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc;
  margin-top: 30px; padding: 16px 18px; font-size: 16px; font-weight: 700;
}

.sh-meta { margin-top: 44px; font-size: 15px; line-height: 2.1; }
.sh-meta b { font-weight: 700; margin-right: 10px; }

.sh-waves {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 275px; display: block; z-index: 0;
}

/* ---------- Login ---------- */

.login { display: flex; justify-content: center; padding: 60px 16px; }
.login-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 36px 32px; width: 100%; max-width: 400px;
}
.login-brand { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; }
.login-title {
  font-size: 56px; font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.015em; line-height: 1; margin: 18px 0 8px;
}
.login-sub { color: var(--muted); font-size: 13px; margin-bottom: 22px; }
.login-btn { width: 100%; padding: 12px; margin-top: 6px; }
.login-err { color: #b3261e; font-size: 13px; margin-bottom: 10px; }

/* ---------- Profil (modal sederhana) ---------- */

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(20, 20, 20, 0.45);
  display: flex; align-items: center; justify-content: center; z-index: 50;
  padding: 20px;
}
.modal {
  background: var(--paper); border-radius: 14px; padding: 24px;
  width: 100%; max-width: 460px; max-height: 90vh; overflow: auto;
}
.modal h2 { font-size: 16px; margin-bottom: 6px; }
.modal .modal-hint { font-size: 12px; color: var(--muted); margin-bottom: 16px; }

/* ---------- Toast ---------- */

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 11px 22px;
  border-radius: 999px; font-size: 13px; opacity: 0;
  pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 60;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Responsif ---------- */

@media (max-width: 1024px) {
  .editor { grid-template-columns: 1fr; }
  .preview-pane { position: static; }
}

@media (max-width: 720px) {
  .topbar, main { padding-left: 16px; padding-right: 16px; }
  .card { overflow-x: auto; }
  .inv-table { min-width: 640px; }
  .toolbar-summary { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Cetak ---------- */

#print-root { display: none; }

@page { size: A4; margin: 0; }

@media print {
  body { background: #fff; }
  .app, .toast, .modal-backdrop { display: none !important; }
  #print-root { display: block; }
  #print-root .sheet {
    width: 210mm; height: 296mm;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}