/* ══════════════════════════════════════════════════════════════
   print.css — Stylesheet untuk semua dokumen cetak KEDAICORP
   Digunakan oleh print_base.html dan semua template extends-nya
   ══════════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────────────
   Semua warna & skala font dipusatkan di sini. Template baru
   sebaiknya pakai variabel ini, bukan hex/px baru. ────────────── */
:root {
    /* Warna netral (border, background, teks abu-abu) — dari yang paling terang ke paling gelap */
    --c-bg-soft:     #f5f5f5;  /* background blok info (identitas, dsb) */
    --c-bg-softer:   #fafafa;  /* background baris turunan (cicilan, dsb) */
    --c-line-hair:   #eee;     /* garis pemisah paling halus (antar baris body) */
    --c-line-soft:   #ccc;     /* garis pemisah standar (antar section, box) */
    --c-line-mid:    #bbb;     /* garis putus-putus (dashed separator) */
    --c-line-strong: #aaa;     /* garis tegas (akhir grup, border tabel) */
    --c-text-faint:  #999;     /* teks sangat pudar (placeholder, tanda) */
    --c-text-muted:  #777;     /* teks label/meta uppercase */
    --c-text-soft:   #666;     /* teks sekunder (mis. status netral) */
    --c-text-dim:    #555;     /* teks baris turunan (cicilan) */
    --c-text-strong: #444;     /* teks header tabel / sub info */
    --c-text-body:   #333;     /* teks footer dokumen */
    --c-line-hard:   #1a1a1a;  /* garis paling tegas (total/tfoot) */

    /* Warna status semantik — dipakai badge & indikator angka (mis. balance) */
    --c-danger:      #dc3545;
    --c-danger-bg:   #f8d7da;
    --c-danger-text: #b91c1c;  /* varian lebih gelap untuk teks di atas putih */
    --c-success:     #28a745;
    --c-success-bg:  #d4edda;
    --c-success-text:#15803d;
    --c-warning:     #ffc107;
    --c-warning-bg:  #fff3cd;
    --c-info:        #17a2b8;
    --c-info-bg:     #d1ecf1;
    --c-ghost:       #999;
    --c-ghost-bg:    #f0f0f0;

    /* Skala font (px) — pakai salah satu dari ini, jangan bikin angka baru */
    --fs-2xs: 8px;   /* mis. print-footer, badge */
    --fs-xs:  9px;   /* label meta uppercase, keterangan kecil */
    --fs-sm:  10px;  /* judul kolom kecil (h3 di ringkasan) */
    --fs-base: 11px; /* isi tabel & teks body dokumen */
    --fs-md:  12px;  /* body dasar dokumen */
    --fs-lg:  14px;  /* nama gerai di header */
    --fs-xl:  18px;  /* angka besar (balance) */
}

/* ── Reset & Base ───────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    margin: 2px;
    padding: 2px;
    background: #fff;
    color: #000;
    font-size: var(--fs-md);
    font-family: Cambria, "Times New Roman", Arial, sans-serif;
}

h1 { font-size: 30px; }
h2 { font-size: 25px; }
h3 { font-size: 21px; }
h4 { font-size: 14px; }
h5 { font-size: 13px; }

label { display: inline-block; }

/* ── Tables ─────────────────────────────────────────────────── */
table {
    border-collapse: collapse;
    width: 100%;
}

table.border        { border: 1px solid #000; }
table.border.thick  { border: 2px solid #000; }
table.data          { font-size: 12px; }
table.noborder *    { border: none !important; }
table.list          { border: 1px solid #000; }

table.border tr     { border-bottom: 1px solid var(--c-line-strong); }

table.border td {
    padding: 2px 5px;
    border: 1px solid var(--c-line-strong) !important;
}

th {
    text-transform: uppercase;
    padding: 2px 5px;
    border: 1px solid #000 !important;
    background: var(--c-line-hair);
    text-align: left;
}

td, th { font-size: var(--fs-md); }

tr.thick, thead tr.thick { border-bottom: 2px solid #000 !important; }

tr.footer {
    text-transform: uppercase;
    font-weight: bold;
    padding: 2px;
    border-top: 1px solid #000 !important;
    background: var(--c-line-hair);
}

th.thick, td.thick  { border: solid #000; border-width: 0 2px; }
td.top              { vertical-align: top; }
td.bilangan, th.bilangan, td.no_urut { text-align: center; }
th.padat, td.padat  { width: 1px; white-space: nowrap; text-align: center; }
td.border           { border: dotted 0.5px gray; }
th.border           { border: solid 0.5pt gray; }

/* ── Alignment ──────────────────────────────────────────────── */
.text-center        { text-align: center; }
.text-left          { text-align: left; }
.text-right         { text-align: right; }

/* ── Typography ─────────────────────────────────────────────── */
.judul              { text-transform: uppercase; text-align: center; }
.underline          { text-decoration: underline; }
.nowrap             { white-space: nowrap; }
.textx              { mso-number-format: "\@"; }

.pull-left          { position: relative; float: left; }
.pull-right         { position: relative; float: right; text-align: right; }

/* ── HR ─────────────────────────────────────────────────────── */
hr.garis {
    border-bottom: 2px solid #000;
    height: 0;
    margin-top: 5px;
    margin-bottom: 10px;
}

hr.dashed { border: 1px dashed #000; margin: 8px 0; }

/* ── Header dokumen ─────────────────────────────────────────── */
.print-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 6px;
    border-bottom: 2px solid #000;
    margin-bottom: 8px;
}

.print-header .gerai-info p {
    font-size: var(--fs-md);
    line-height: 1.4;
}

.print-header .gerai-nama {
    font-size: var(--fs-lg);
    font-weight: bold;
    text-transform: uppercase;
}

.print-header .gerai-sub {
    font-size: var(--fs-2xs);
    color: var(--c-text-strong);
}

.print-header img.logo {
    max-height: 60px;
    max-width: 160px;
    object-fit: contain;
}

/* ── Footer dokumen ─────────────────────────────────────────── */
.print-footer {
    margin-top: 10px;
    border-top: 1px solid #000;
    padding-top: 5px;
    font-size: var(--fs-2xs);
    color: var(--c-text-body);
}

.print-footer table td {
    text-align: center;
    border: none !important;
    font-size: var(--fs-2xs);
    padding: 2px 4px;
}

/* ── Tanda tangan ───────────────────────────────────────────── */
table#ttd td {
    text-align: center;
    white-space: nowrap;
    border: none !important;
}

/* ── Badge status ───────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 1px 7px;
    font-size: var(--fs-2xs);
    font-weight: bold;
    border-radius: 3px;
    border: 1px solid #000;
}

.badge-success      { background: var(--c-success-bg); border-color: var(--c-success); }
.badge-warning      { background: var(--c-warning-bg); border-color: var(--c-warning); }
.badge-error        { background: var(--c-danger-bg); border-color: var(--c-danger); }
.badge-info         { background: var(--c-info-bg); border-color: var(--c-info); }
.badge-ghost        { background: var(--c-ghost-bg); border-color: var(--c-ghost); }
.badge-square       { border-radius: 0; }

/* ── HR + Logo branding ─────────────────────────────────────── */
.hr-logo {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 8px 0;
}

.hr-logo hr {
    flex-grow: 1;
    border: none;
    height: 1px;
    background: #000;
    margin: 0;
}

.hr-logo img {
    max-width: 200px;
    height: auto;
    margin-left: 10px;
}

/* ── Widget image ───────────────────────────────────────────── */
.widget-table-img {
    width: 114px;
    height: 60px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 3px;
    margin-right: 10px;
}

/* ── Tombol cetak (screen only) ─────────────────────────────── */
.btn-print-area {
    text-align: center;
    padding: 16px;
    background: var(--c-ghost-bg);
    border-bottom: 1px solid var(--c-line-soft);
}

.btn-print {
    padding: 8px 24px;
    background: #1e3a5f;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    font-family: Arial, sans-serif;
}

.btn-print:hover { background: #162d4a; }

/* ── Blok identitas pelanggan (mis. riwayat pelanggan) ────────── */
.identitas {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
    margin-bottom: 14px;
    padding: 8px 10px;
    background: var(--c-bg-soft);
    border-radius: 4px;
}
.identitas div { margin-bottom: 2px; }
.identitas .label {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.identitas .value { font-weight: 600; }

/* ── Ringkasan 3 kolom (mis. hutang/titipan/balance) ──────────── */
.ringkasan {
    display: flex;
    border: 1px solid var(--c-line-soft);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 16px;
}
.ringkasan .kolom {
    flex: 1;
    padding: 8px 10px;
    border-right: 1px solid var(--c-line-soft);
}
.ringkasan .kolom:last-child { border-right: none; }
.ringkasan .kolom h3 {
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-text-muted);
    margin: 0 0 6px 0;
}
.ringkasan .baris {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    font-size: var(--fs-base);
}
.ringkasan .baris.total {
    border-top: 1px dashed var(--c-line-mid);
    margin-top: 4px;
    padding-top: 4px;
    font-weight: 700;
}
.ringkasan .balance { text-align: center; }
.ringkasan .balance .angka {
    font-size: var(--fs-xl);
    font-weight: 800;
    margin: 6px 0 2px 0;
}
.ringkasan .balance .angka.merah  { color: var(--c-danger-text); }
.ringkasan .balance .angka.hijau  { color: var(--c-success-text); }
.ringkasan .balance .angka.netral { color: var(--c-text-soft); }
.ringkasan .balance .ket { font-size: var(--fs-xs); color: var(--c-text-muted); }

/* ── Judul section di dalam konten dokumen ────────────────────── */
.section-title {
    font-size: var(--fs-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 16px 0 6px 0;
    padding-bottom: 3px;
}

/* ── Tabel riwayat (baris invoice + baris cicilan bertingkat) ─── */
/* border-collapse & width sudah di-cover rule `table` generic di atas */
table.riwayat { margin-bottom: 4px; }

/* background, text-align, text-transform sudah di-cover rule `th` generic */
table.riwayat thead th {
    font-size: var(--fs-xs);
    letter-spacing: .02em;
    color: var(--c-text-strong);
    padding: 5px 6px;
    border-bottom: 1px solid var(--c-line-soft);
    border-top: none;
}
table.riwayat thead th.num { text-align: right; }

table.riwayat tbody td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--c-line-hair);
    border-top: none;
    vertical-align: top;
    font-size: var(--fs-base);
}
table.riwayat tbody tr.row-invoice td { border-bottom: none !important; }
table.riwayat tbody td.num { text-align: right; white-space: nowrap; }

table.riwayat tr.row-cicilan td {
    padding: 2px 6px 2px 22px;
    border-bottom: none !important;
    border-top: none !important;
    font-size: var(--fs-xs);
    color: var(--c-text-dim);
    background: var(--c-bg-softer);
}
table.riwayat tr.row-cicilan.row-akhir td,
table.riwayat tbody tr.row-akhir td { border-bottom: 1px solid var(--c-line-strong) !important; }
table.riwayat tr.row-cicilan .tanda { color: var(--c-text-faint); margin-right: 4px; }

/* tr.footer generic tidak dipakai di sini karena warna border & tanpa uppercase/background */
table.riwayat tfoot td {
    padding: 5px 6px;
    font-weight: 700;
    border-top: 1px solid var(--c-line-hard);
    font-size: var(--fs-base);
}
table.riwayat tfoot td.num { text-align: right; }

.kosong { text-align: center; color: var(--c-text-faint); padding: 10px 0; font-style: italic; font-size: var(--fs-base); }

/* ── @media print ───────────────────────────────────────────── */
@media print {
    .no-print           { display: none !important; }
    .badge              { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}