/* CSS untuk Modal Preview Kitchen */
#frame-modal {
    display: none;
    /* Disembunyikan secara default */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
}

#frame-kichen {
    background-color: #FEFEFE;
    border: 1px solid #888;
    width: 90vw;
    /* Lebar modal 90% dari lebar viewport */
    max-width: 1200px;
    height: 85vh;
    /* Tinggi modal 85% dari tinggi viewport */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 8px;
    /* Kunci utama layout: Flexbox */
    display: flex;
    flex-direction: row;
    /* Menyusun anak-anaknya (scroll-area dan controls) secara horizontal */
}

/* Area untuk preview yang bisa di-scroll */
#preview-scroll-area {
    flex-grow: 1;
    /* Mengambil semua sisa ruang yang tersedia */
    overflow-x: auto;
    /* Memungkinkan scroll horizontal jika konten meluap */
    overflow-y: hidden;
    padding: 20px;
    background-color: #E9E9E9;
    border-radius: 8px 0 0 8px;
    /* Sudut tumpul di kiri */
}

/* Kontainer di dalam area scroll untuk menampung semua preview */
#preview-container {
    display: flex;
    /* Membuat semua preview berjajar ke samping */
    flex-direction: row;
    gap: 20px;
    /* Jarak antar preview */
    height: 100%;
    white-space: pre;
    /* Penting agar teks di dalam preview tidak ter-wrap */
}

.preview-wrapper {
    flex-shrink: 0;
    /* Mencegah preview menyusut */
}

.preview {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 0.9;
    padding: 15px;
    background: #FFF;
    border: 1px solid #CCC;
    border-radius: 7px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Area untuk tombol-tombol di sebelah kanan */
#preview-controls {
    flex-shrink: 0;
    /* Mencegah panel ini menyusut */
    width: 101px;
    /* Lebar panel tombol yang tetap */
    padding: 20px;
    border-left: 1px solid #CCC;
    background-color: #F8F9FA;
    border-radius: 0 8px 8px 0;
    /* Sudut tumpul di kanan */
    /* Menata tombol di dalamnya */
    display: flex;
    flex-direction: column;
    /* Tombol disusun vertikal */
    align-items: center;
    /* Tombol di tengah secara horizontal */
    justify-content: flex-start;
    /* Tombol mulai dari atas */
    gap: 15px;
    /* Jarak antar tombol */
}

button#closePreviewBtn {
    height: 92px;
    margin-top: 238px;
}

#preview-controls button {
    width: 100%;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    transition: background-color 0.2s;
}

#masterPrintBtn {
    background-color: #28A745;
    /* Hijau */
    color: white;
}

#masterPrintBtn:hover {
    background-color: #218838;
}

#masterPrintBtn:disabled {
    background-color: #6C757D;
    cursor: not-allowed;
}

#closePreviewBtn {
    background-color: #6C757D;
    /* Abu-abu */
    color: white;
}

#closePreviewBtn:hover {
    background-color: #5A6268;
}
