Masalah klasik Blade. Satu dokumen merasa paling penting, lalu CSS-nya nyebar ke mana-mana seperti bau asap. Tenang, ini bisa dirapikan tanpa ritual aneh.

Intinya: **isolasi CSS per dokumen**. Jangan biarkan style global hidup bebas.

Di bawah ini opsi yang **paling waras sampai paling hardcore**, pilih sesuai kebutuhan.

---

## 1️⃣ Bungkus semua dengan wrapper unik (REKOMENDASI)

Ini cara paling aman dan paling sering dipakai.

### Langkah:

Tambahkan **class unik** di root dokumen.

```html
<div class="doc-internal-order">
    <!-- seluruh HTML kamu pindahkan ke sini -->
</div>
```

Lalu **prefix semua CSS** dengan `.doc-internal-order`.

### Contoh:

```css
.doc-internal-order body {
    font-family: Arial, Helvetica, sans-serif;
}

.doc-internal-order .paper {
    background-color: #fff;
}

.doc-internal-order .product-table {
    border: 1px solid #000;
}
```

### Kenapa ini bagus?

* Bisa render **2 dokumen dalam 1 halaman**
* Tidak saling ganggu
* Tidak perlu iframe
* Tetap print-friendly

⚠️ Catatan penting
`body`, `html`, `@page` **tidak bisa diprefix**. Untuk itu:

---

## 2️⃣ Jangan styling `body`, ganti ke wrapper

Ini sumber konflik paling sering.

❌ Jangan:

```css
body {
    font-size: 12px;
}
```

✅ Ganti:

```css
.doc-internal-order {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}
```

Begitu juga:

* `line-height`
* `background-color`
* `margin`
* `padding`

Biarkan `body` polos dan tidak sok dominan.

---

## 3️⃣ Pisahkan CSS per dokumen (Blade way yang benar)

Kalau kamu pakai layout utama.

### layout.blade.php

```blade
<head>
    @stack('styles')
</head>
```

### internal_order.blade.php

```blade
@push('styles')
<style>
.doc-internal-order {
    font-size: 12px;
}
</style>
@endpush
```

Jadi CSS:

* Hanya hidup saat blade itu dipanggil
* Tidak global
* Tidak bocor

---

## 4️⃣ Print-only CSS biar makin jinak

Kalau konflik muncul saat print.

```css
@media print {
    .doc-internal-order .paper {
        box-shadow: none;
    }
}
```

Dokumen lain aman, printer juga tidak stres.

---

## 5️⃣ Iframe (opsi nuklir, jarang perlu)

Kalau dokumen:

* super kompleks
* beda ukuran page
* beda `@page`

Baru pakai:

```html
<iframe src="/print/internal-order"></iframe>
```

Ini **100% terisolasi**, tapi:

* ribet komunikasi data
* print jadi lebih tricky

Biasanya overkill.

---

## Rekomendasi paling masuk akal untuk kasusmu

Karena kamu:

* Kadang render **2 dokumen 1 halaman**
* Banyak styling print
* Blade Laravel

👉 **Pakai kombinasi ini**:

1. Wrapper unik per dokumen
2. Jangan styling `body`
3. CSS diprefix wrapper
4. `@stack('styles')` per blade

Kalau mau, aku bisa:

* refactor CSS kamu jadi versi terisolasi
* bikinin helper `@documentStyle('internal-order')`
* atau bikin base “print document system” biar semua dokumen konsisten

Dokumen ini sudah rapi. Tinggal jangan biarkan CSS-nya merasa paling berkuasa di halaman.