/* =========================================
   UI WEBSITE (PANEL INPUT)
   ========================================= */
body {
    margin: 0; font-family: Arial, sans-serif; background-color: #f0f2f5;
}

.navbar {
    background-color: #d32f2f; color: white; padding: 10px 20px;
    position: sticky; top: 0; z-index: 1000;
}

.nav-content {
    max-width: 1200px; margin: auto; display: flex; 
    justify-content: space-between; align-items: center;
}

.btn-download {
    background: white; color: #d32f2f; border: none; padding: 8px 15px;
    border-radius: 5px; font-weight: bold; cursor: pointer;
}

.main-container {
    display: flex; flex-wrap: wrap; gap: 20px;
    max-width: 1300px; margin: 20px auto; padding: 0 15px;
}

.input-panel {
    flex: 1; min-width: 350px; background: white; padding: 20px;
    border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); height: fit-content;
}

.panel-title { font-size: 18px; border-bottom: 2px solid #eee; padding-bottom: 10px; margin-bottom: 20px; }

/* Form Elements */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-weight: bold; margin-bottom: 5px; font-size: 14px; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* UI Muat Naik Imej (Kemas) */

/* --- Tambahkan kod ini di bahagian bawah sekali --- */

.btn-download-main {
    width: 100%;             /* Memenuhi lebar panel input */
    background-color: #d32f2f; /* Warna merah rasmi Bomba */
    color: white;
    border: none;
    padding: 15px;           /* Saiz butang yang besar dan mesra sentuhan mobile */
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 25px;        /* Memberi ruang yang jelas dari kotak gambar */
    box-shadow: 0 4px 10px rgba(211, 47, 47, 0.2); /* Bayang halus untuk kesan timbul */
    transition: all 0.3s ease;
}

.btn-download-main:hover {
    background-color: #b71c1c; /* Warna berubah sedikit gelap semasa dihalakan mouse */
    transform: translateY(-2px); /* Kesan butang naik sedikit */
}

.btn-download-main:active {
    transform: translateY(0); /* Kesan butang ditekan */
}

.upload-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px;
}

.upload-label {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 90px; border: 2px dashed #ccd0d5; border-radius: 8px; cursor: pointer;
    background: #fdfdfd; position: relative; overflow: hidden;
}

.upload-label:hover { border-color: #d32f2f; background: #fff5f5; }

.mini-preview {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center; display: none; z-index: 1;
}

.icon-plus, .upload-label span { position: relative; z-index: 2; }

/* =========================================
   PDF & LIVE PREVIEW (FORMAT ASAL)
   ========================================= */
.preview-panel { flex: 2; display: flex; flex-direction: column; align-items: center; }
.preview-label { font-weight: bold; color: #777; margin-bottom: 10px; text-transform: uppercase; }

#pdf-content {
    width: 210mm;
    height: 295mm;        /* Kurangkan dari 296mm ke 295mm (Safe Zone) */
    background: white;
    overflow: hidden;     /* PAKSA kandungan yang terlebih untuk tidak mencetuskan page baru */
    box-sizing: border-box; 
    position: relative;
}

/* Container utama dalam A4 */
.pdf-inner {
    padding: 5mm 20mm;   /* Pastikan padding bawah tidak terlalu besar */
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* Pastikan padding dikira dalam saiz kotak */
}

/* Header: Logo & Teks */
.header-container { 
    position: relative; 
    text-align: center; 
    margin-bottom: 5px;      /* DIKURANGKAN dari 15px ke 5px supaya lebih rapat ke bawah */
    min-height: 80px; 
    border-bottom: 2px solid black; 
    padding-bottom: 5px; 
}

/* Teks Header */
.header-text p { 
    margin: 1px 0;         /* Rapatkan jarak antara barisan teks tajuk */
    font-weight: bold; 
    text-transform: uppercase; 
    line-height: 1.1;
}

.main-title { font-size: 13pt; margin-bottom: 5px !important; }
.dept-title, .state-title { font-size: 11pt; }

/* Info Section (Susunan 2 Lajur) */
.info-container { 
    margin-top: 5px;         /* DIKURANGKAN dari 10px ke 5px supaya lebih rapat ke atas */
    font-family: Arial, sans-serif; 
    font-size: 8pt; 
    color: black; 
}

.info-row { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 5px;            /* Jarak antara baris dikecilkan sedikit */
}

.info-col { 
    width: 48%; 
    display: flex; 
    align-items: flex-start;
}

/* Gaya untuk Label (BALAI, PASUKAN, dll) */
.info-col strong { 
    width: 85px;                   /* Lebar label dilaraskan untuk font kecil */
    display: inline-block; 
    flex-shrink: 0; 
}

/* Gaya untuk Data yang diisi (Output) */
.info-col span {
    font-family: Arial, sans-serif !important;
    font-size: 8pt !important;
    font-weight: bold !important; /* MENJADIKAN DATA BOLD */
    color: black;
}
.colon { 
    margin-right: 8px; 
}

/* Grid Gambar 2x2 (Memenuhi Ruang) */
.image-grid-container { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: auto auto; /* Ubah '1fr 1fr' kepada 'auto auto' supaya tinggi ikut nisbah gambar */
    border: 1.5px solid black; 
    margin-top: 15px; 
    /* flex-grow: 1;  <-- PADAM baris ini supaya grid tidak memanjang ke bawah */
    /* max-height: 190mm; <-- PADAM baris ini juga */
}

.image-box {
    width: 100%;             
    aspect-ratio: 1 / 1;     /* Kekalkan bentuk petak sempurna */
    border: 0.5px solid black;  
    background-color: #eee;
    position: relative;
    overflow: hidden;        /* Potong bahagian yang terlebih */
}

.image-box img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Sentiasa di tengah */
    display: block;
}

/* Jika gambar melintang: Paksa tinggi 100%, lebar jadi auto (crop kiri/kanan) */
.image-box.landscape img {
    height: 100%;
    width: auto;
}

/* Jika gambar menegak: Paksa lebar 100%, tinggi jadi auto (crop atas/bawah) */
.image-box.portrait img {
    width: 100%;
    height: auto;
}

/* Footer & Tandatangan (Arial 9pt) */
.footer-container { 
    display: flex; 
    justify-content: space-between; 
    margin-top: 15px;    /* Kurangkan dari 30px ke 15px */
    padding-bottom: 2mm; 
}

.sign-block { 
    width: 250px; 
    font-size: 9pt; /* Saiz Font 9 */
    text-align: left; 
}

.sign-title {
    font-weight: bold;
    margin-bottom: 0;
}

.sign-space { 
    height: 50px; /* Ruang untuk tandatangan manual */
}

/* (Penyelia) & (Ketua Balai) - Tidak Bold */
.sign-role { 
    margin: 2px 0; 
    font-weight: bold !important; /* Sekarang menjadi Bold */
}

/* Barisan Tarikh Baru */
.sign-date {
    margin: 2px 0;
    font-weight: bold;
}

.sign-block p { 
    margin: 5px 0; 
    font-weight: bold; 
}

/* =========================================
   MOBILE RESPONSIVE TWEAKS
   ========================================= */

/* Untuk Tablet & Smartphone (Bawah 800px) */
@media (max-width: 800px) {
    .main-container {
        padding: 10px;
        margin: 10px auto;
        gap: 15px;
    }

    .input-panel {
        min-width: 100%; /* Panel input memenuhi lebar skrin */
        padding: 15px;
    }

    /* Tukar 2-lajur input kepada 1-lajur supaya lebih mudah ditaip */
    .form-row {
        grid-template-columns: 1fr; 
    }

    .preview-panel {
        width: 100%;
        overflow-x: auto; /* Membolehkan skrol jika preview terlebih lebar */
        padding-bottom: 20px;
    }

    /* Kecilkan skala Live Preview supaya muat di skrin telefon */
    #pdf-content {
        transform: scale(0.35); /* Skala lebih kecil untuk mobile */
        transform-origin: top center;
        margin-bottom: -180mm; /* Laraskan ruang kosong akibat scaling */
    }

    .navbar h1 {
        font-size: 16px; /* Kecilkan saiz tajuk navbar */
    }
}

/* =========================================
   PENGEMASAN MOBILE RESPONSIVE (OPTIMIZED)
   ========================================= */

@media (max-width: 992px) {
    .main-container {
        flex-direction: column; /* Stack input atas, preview bawah */
        padding: 10px;
        margin: 0 auto;
    }

    .input-panel {
        width: 100%;
        min-width: unset;
        box-sizing: border-box;
        margin-bottom: 20px;
    }

    /* Memastikan Live Preview muat di skrin telefon */
    .preview-panel {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-x: hidden; /* Elak skrol mendatar */
        background: #e4e6eb; /* Warna latar belakang preview supaya nampak beza */
        padding: 20px 0;
        border-radius: 8px;
    }

    /* MAGIC FIX: Skala A4 ikut lebar skrin telefon */
    #pdf-content {
        transform: scale(0.42); /* Skala default untuk tablet */
        transform-origin: top center;
        margin-bottom: -170mm; /* Menghilangkan ruang kosong putih di bawah */
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }

    .navbar h1 { font-size: 14px; }
}

/* Untuk Smartphone Kecil (iPhone/Android Kecil) */
@media (max-width: 480px) {
    #pdf-content {
        transform: scale(0.32); /* Skala lebih kecil untuk skrin 360px-400px */
        margin-bottom: -200mm;
    }

    .form-row {
        grid-template-columns: 1fr; /* Tarikh & Pasukan jadi satu lajur */
    }

    .upload-grid {
        gap: 8px;
    }

    .upload-label {
        height: 75px;
    }
}

/* =========================================
   PENETAPAN FONT & SAIZ (STRICT)
   ========================================= */

/* Info Section (Balai/Aktiviti) - Arial 8pt */
.info-container {
    font-family: Arial, sans-serif !important;
    font-size: 8pt !important;
}
.info-col strong, .info-col span {
    font-size: 8pt !important;
}

/* Footer Section - Arial 9pt */
.footer-container {
    font-family: Arial, sans-serif !important;
    font-size: 9pt !important;
}
.sign-block p {
    font-size: 9pt !important;
}
.sign-role, .sign-date {
    font-weight: bold !important;
}
.web-footer {
    text-align: center;
    padding: 20px 0;
    color: #7f8c8d;
    font-size: 14px;
    margin-top: 40px;
    border-top: 1px solid #ddd;
    background-color: #f8f9fa;
    width: 100%;
}

.web-footer strong {
    color: #d32f2f; /* Warna merah Bomba untuk menonjolkan nama anda */
}