/* doc.css — .doc-*: dokumen invoice A4 (lebar maks 794px ≈ A4), 6 template (minimal, modern, klasik, elegan, tegas, lembut) + pemilih bergambar */
/* Kertas invoice selalu terang (juga saat mode gelap): token terang dipasang ulang di dalam kertas. */
.doc-root{color-scheme:light;--ink:#0f172a;--text-2:#475569;--text-3:#64748b;--faint:#94a3b8;--label:#334155;--line:rgba(148,163,184,.22);--line-strong:#e2e8f0;--surface:#ffffff;--surface-2:#f7f8fb;--input-bg:#ffffff;--hover-ink:rgba(15,23,42,.06);--switch-off:#cbd5e1;--brand-text:var(--brand-2);--brand-soft:color-mix(in srgb,var(--brand-2) 12%,transparent);--rev-text:var(--rev-1);--cash-text:var(--cash-1);--profit-text:var(--profit-1);--ar-text:var(--ar-1);--exp-text:var(--exp-1);--due-text:var(--due-1)}
.doc-root{position:relative;overflow:hidden;width:100%;max-width:794px;padding:40px 44px;background:#fff;color:#0f172a;border-radius:16px;box-shadow:var(--sh-2);font-size:13px;line-height:1.55}
.doc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:28px}
.doc-brand{display:flex;gap:14px;align-items:flex-start;min-width:0}
.doc-logo{width:48px;height:48px;border-radius:13px;background:var(--brand-grad);color:#fff;display:grid;place-items:center;font-weight:800;font-size:22px;flex:none;overflow:hidden}
.doc-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.doc-co{display:block;font-size:16px;font-weight:800}
.doc-small{font-size:12px;color:#475569;margin-top:2px;line-height:1.6}
.doc-title{flex:none;text-align:right}
.doc-h{font-size:30px;font-weight:800;letter-spacing:.06em;line-height:1;color:var(--brand-2)}
.doc-meta{display:grid;grid-template-columns:auto auto;justify-content:end;gap:3px 12px;margin-top:10px;font-size:12px}
.doc-meta dt{color:#64748b}
.doc-meta dd{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.doc-bill{margin-bottom:22px}
.doc-lbl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin-bottom:6px}
.doc-client{font-size:15px;font-weight:800}
.doc-table{width:100%;border-collapse:collapse;margin-bottom:8px}
.doc-table th{padding:10px 8px;border-bottom:2px solid #e2e8f0;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-align:left;color:#64748b}
.doc-table td{padding:12px 8px;border-bottom:1px solid #eef1f5;vertical-align:top}
.doc-table .doc-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.doc-sum{width:min(340px,100%);margin:14px 0 0 auto}
.doc-srow{display:flex;justify-content:space-between;gap:16px;padding:6px 0;color:#475569}
.doc-srow small{display:block;font-size:12px;color:#64748b}
.doc-srow span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.doc-total{margin-top:4px;padding-top:12px;border-top:2px solid #e2e8f0;font-size:18px;font-weight:800;color:#0f172a}
.doc-net{font-weight:700;color:#0f172a}
.doc-notes{margin-top:26px;padding:14px 16px;border-radius:12px;background:#f7f8fb;font-size:12px;color:#475569}
.doc-foot{margin-top:24px;font-size:12px;text-align:center;color:#64748b}
.doc-stamp{position:absolute;top:150px;right:40px;padding:6px 16px;border:3px solid currentColor;border-radius:10px;font-size:26px;font-weight:800;letter-spacing:.14em;opacity:.22;transform:rotate(-14deg);pointer-events:none}
.doc-stamp--paid{color:#15803d}
.doc-stamp--void{color:#b91c1c}
.doc-stamp--draft{color:#475569}

/* Template: modern — pita gradasi brand di kepala */
.doc--modern .doc-head{margin:-40px -44px 28px;padding:32px 44px;background:var(--brand-grad);color:#fff}
.doc--modern .doc-head .doc-small,.doc--modern .doc-meta dt{color:rgba(255,255,255,.88)}
.doc--modern .doc-h{color:#fff}
.doc--modern .doc-logo{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35)}
/* Template: klasik — garis ganda, tabel bergaris penuh */
.doc--klasik .doc-head{padding-bottom:18px;border-bottom:3px double #0f172a}
.doc--klasik .doc-h{font-size:26px;letter-spacing:.24em;color:#0f172a}
.doc--klasik .doc-logo{border-radius:4px}
.doc--klasik .doc-table th,.doc--klasik .doc-table td{border:1px solid #cbd5e1}
.doc--klasik .doc-table th{background:#f1f5f9}
/* Template: elegan — huruf serif, garis tipis warna brand, logo bulat, total bergaris ganda, catatan bergaris kiri */
.doc--elegan .doc-co,.doc--elegan .doc-h,.doc--elegan .doc-client,.doc--elegan .doc-total,.doc--elegan .doc-foot{font-family:Georgia,'Times New Roman',serif}
.doc--elegan .doc-head{padding-bottom:22px;border-bottom:1px solid color-mix(in srgb,var(--brand) 40%,#ffffff)}
.doc--elegan .doc-logo{border-radius:50%;background:#fff;color:var(--brand);border:1.5px solid var(--brand)}
.doc--elegan .doc-co{font-size:18px;font-weight:700;letter-spacing:.01em}
.doc--elegan .doc-h{font-size:30px;font-weight:400;letter-spacing:.32em;color:var(--brand)}
.doc--elegan .doc-lbl{letter-spacing:.18em;color:var(--brand)}
.doc--elegan .doc-client{font-size:17px}
.doc--elegan .doc-table th{border-top:1px solid color-mix(in srgb,var(--brand) 40%,#ffffff);border-bottom:1px solid color-mix(in srgb,var(--brand) 40%,#ffffff);font-size:11px;letter-spacing:.14em;color:#475569}
.doc--elegan .doc-table td{border-bottom:1px dotted #cbd5e1}
.doc--elegan .doc-total{padding-bottom:10px;border-top:1px solid #0f172a;border-bottom:3px double #0f172a;font-size:20px;font-weight:700}
.doc--elegan .doc-notes{border-left:2px solid var(--brand);border-radius:0;background:none;font-style:italic}
.doc--elegan .doc-foot{font-size:13px;font-style:italic;color:#475569}
/* Template: tegas — judul besar tebal, garis brand tebal, kepala tabel gelap & baris belang, Total = blok warna brand */
.doc--tegas .doc-head{padding-bottom:20px;border-bottom:6px solid var(--brand)}
.doc--tegas .doc-h{font-size:44px;font-weight:900;letter-spacing:-.01em;color:#0f172a}
.doc--tegas .doc-logo{border-radius:10px;background:#0f172a}
.doc--tegas .doc-lbl{color:var(--brand)}
.doc--tegas .doc-table{border-collapse:separate;border-spacing:0}
.doc--tegas .doc-table th{border:0;background:#0f172a;color:#fff}
.doc--tegas .doc-table th:first-child{border-radius:8px 0 0 8px}
.doc--tegas .doc-table th:last-child{border-radius:0 8px 8px 0}
.doc--tegas .doc-table td{border:0}
.doc--tegas .doc-table tbody tr:nth-child(even) td{background:#f8fafc}
.doc--tegas .doc-total{margin-top:8px;padding:12px 14px;border:0;border-radius:10px;background:var(--brand);color:#fff;font-size:20px}
/* Template: lembut — panel membulat warna brand muda (kepala, penerima, kepala tabel, total, catatan) */
.doc--lembut{--doc-soft:color-mix(in srgb,var(--brand-2) 7%,#ffffff);--doc-soft-2:color-mix(in srgb,var(--brand-2) 14%,#ffffff)}
.doc--lembut .doc-head{padding:22px 24px;border-radius:18px;background:var(--doc-soft)}
.doc--lembut .doc-logo{border-radius:16px}
.doc--lembut .doc-h{letter-spacing:.04em;color:var(--brand)}
.doc--lembut .doc-lbl{color:var(--brand)}
.doc--lembut .doc-bill{padding:16px 18px;border:1px solid var(--doc-soft-2);border-radius:16px}
.doc--lembut .doc-table{border-collapse:separate;border-spacing:0 6px}
.doc--lembut .doc-table th{border:0;background:var(--doc-soft-2);color:color-mix(in srgb,var(--brand) 75%,#0f172a)}
.doc--lembut .doc-table th:first-child,.doc--lembut .doc-table td:first-child{border-radius:12px 0 0 12px}
.doc--lembut .doc-table th:last-child,.doc--lembut .doc-table td:last-child{border-radius:0 12px 12px 0}
.doc--lembut .doc-table td{border:0;background:#fafbfd}
.doc--lembut .doc-sum{padding:8px 16px 10px;border-radius:16px;background:var(--doc-soft)}
.doc--lembut .doc-total{border-top-color:var(--doc-soft-2);color:var(--brand)}
.doc--lembut .doc-notes{border-radius:16px;background:var(--doc-soft)}
.doc--lembut .doc-stamp{border-radius:999px}

/* Pemilih template bergambar (editor, detail, Pengaturan): gambar mini kertas (selalu terang) + nama, 3 kolom */
.doc-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:360px}
.doc-pick{display:flex;flex-direction:column;gap:6px;min-width:0;padding:6px 6px 8px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--surface);transition:border-color var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast) var(--ease-out)}
.doc-pick:hover{transform:translateY(-1px);border-color:var(--brand-2)}
.doc-pick:active{transform:scale(.97)}
.doc-pick[aria-checked="true"]{border-color:var(--brand-2);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-2) 18%,transparent)}
.doc-pick-name{font-size:var(--fs-xs);font-weight:700;color:var(--text-2);text-align:center}
.doc-pick[aria-checked="true"] .doc-pick-name{color:var(--brand-text)}
.doc-thumb{position:relative;display:flex;flex-direction:column;gap:4px;aspect-ratio:3 / 4;padding:8px 7px;overflow:hidden;border:1px solid #e2e8f0;border-radius:6px;background:#fff}
.doc-thumb i{display:block;flex:none;border-radius:2px;background:#e2e8f0}
.doc-thumb .doc-t-head{height:14px;margin-bottom:3px;background:none;border-bottom:1px solid #e2e8f0}
.doc-thumb .doc-t-head::before{content:"";display:block;width:10px;height:10px;border-radius:3px;background:#cbd5e1}
.doc-thumb .doc-t-line{height:3px;width:70%}
.doc-thumb .doc-t-short{width:45%}
.doc-thumb .doc-t-table{height:6px;margin-top:3px;background:#cbd5e1}
.doc-thumb .doc-t-row{height:3px}
.doc-thumb .doc-t-total{height:6px;width:48%;margin-top:auto;margin-left:auto;background:#94a3b8}
.doc-thumb--modern .doc-t-head{height:22px;margin:-8px -7px 3px;border:0;border-radius:0;background:var(--brand-grad)}
.doc-thumb--modern .doc-t-head::before{margin:6px 0 0 7px;background:rgba(255,255,255,.55)}
.doc-thumb--klasik .doc-t-head{border-bottom:3px double #0f172a;border-radius:0}
.doc-thumb--klasik .doc-t-table{height:10px;border:1px solid #94a3b8;border-radius:0;background:#f1f5f9}
.doc-thumb--elegan .doc-t-head{border-bottom-color:color-mix(in srgb,var(--brand) 45%,#ffffff)}
.doc-thumb--elegan .doc-t-head::before{border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--brand)}
.doc-thumb--elegan .doc-t-table{height:4px;background:none;border-top:1px solid color-mix(in srgb,var(--brand) 45%,#ffffff);border-bottom:1px solid color-mix(in srgb,var(--brand) 45%,#ffffff);border-radius:0}
.doc-thumb--elegan .doc-t-total{height:5px;background:none;border-bottom:3px double #0f172a;border-radius:0}
.doc-thumb--tegas .doc-t-head{height:16px;border-bottom:3px solid var(--brand);border-radius:0}
.doc-thumb--tegas .doc-t-head::before{background:#0f172a}
.doc-thumb--tegas .doc-t-table{height:7px;background:#0f172a}
.doc-thumb--tegas .doc-t-total{height:9px;border-radius:3px;background:var(--brand)}
.doc-thumb--lembut .doc-t-head{height:20px;border:0;border-radius:6px;background:color-mix(in srgb,var(--brand-2) 12%,#ffffff);padding:5px}
.doc-thumb--lembut .doc-t-head::before{width:9px;height:9px;border-radius:4px;background:var(--brand-2)}
.doc-thumb--lembut .doc-t-table{height:7px;border-radius:4px;background:color-mix(in srgb,var(--brand-2) 18%,#ffffff)}
.doc-thumb--lembut .doc-t-total{height:9px;border-radius:5px;background:color-mix(in srgb,var(--brand-2) 18%,#ffffff)}

@media (max-width:767px){
  .doc-root{padding:22px 18px;border-radius:14px}
  .doc-head{flex-direction:column;gap:14px}
  .doc-title{text-align:left}
  .doc-meta{justify-content:start}
  .doc-h{font-size:24px}
  .doc--modern .doc-head{margin:-22px -18px 22px;padding:22px 18px}
  .doc-stamp{top:auto;bottom:90px;right:18px;font-size:20px}
}
/* Pratinjau di HP: tiap baris jasa — deskripsi selebar kertas, lalu "qty × harga" di kiri & jumlah di kanan (cetak/PDF tetap tabel) */
@media screen and (max-width:767px){
  .doc-table thead{display:none}
  .doc-table,.doc-table tbody{display:block}
  .doc-table tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;column-gap:4px;padding:10px 0;border-bottom:1px solid #eef1f5}
  .doc-table td{padding:0;border:0}
  .doc-table td:first-child{grid-column:1 / -1;margin-bottom:3px;font-weight:600}
  .doc-table td:nth-child(2),.doc-table td:nth-child(3){text-align:left;color:#64748b}
  .doc-table td:nth-child(2)::after{content:" ×"}
  .doc-table td:nth-child(4){font-weight:700}
  .doc--klasik .doc-table td{border:0}
  .doc--klasik .doc-table tr{border-bottom-color:#cbd5e1}
  .doc--tegas .doc-h{font-size:34px}
  .doc--tegas .doc-table tr{border-bottom:0}
  .doc--tegas .doc-table tbody tr:nth-child(even){padding-inline:8px;border-radius:8px;background:#f8fafc}
  .doc--tegas .doc-table tbody tr:nth-child(even) td{background:none}
  .doc--lembut .doc-head{padding:16px}
  .doc--lembut .doc-table tr{margin-bottom:6px;padding:10px 12px;border:0;border-radius:12px;background:#fafbfd}
  .doc--lembut .doc-table td{background:none}
}