/* =============================================
   PDF-MODAL.CSS — Modal PDF Responsive
   /portalperaturan/assets/css/pdf-modal.css
   Include di semua halaman publik yang punya PDF modal
   ============================================= */

/* ══════════════════════════════════════════════
   OVERLAY
   ══════════════════════════════════════════════ */
.pdf-modal-overlay,
#pdfModal .modal-dialog,
#pdfOverlay {
    padding: 0 !important;
}

/* ══════════════════════════════════════════════
   MODAL BOX — Desktop
   ══════════════════════════════════════════════ */
.pdf-modal-box,
#pdfModal .modal-content {
    display: flex;
    flex-direction: column;
    border-radius: 16px !important;
    overflow: hidden;
    max-height: 92vh;
    border: none !important;
}

.pdf-modal-iframe,
#pdfFrame {
    flex: 1;
    width: 100%;
    border: none;
    display: block;
    min-height: 0; /* penting untuk flex */
}

/* ══════════════════════════════════════════════
   MOBILE — layar ≤768px
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Overlay fullscreen di mobile */
    .modal-overlay,
    #pdfOverlay {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    /* Modal naik dari bawah seperti bottom sheet */
    .pdf-modal-box,
    #pdfModal .modal-content {
        border-radius: 20px 20px 0 0 !important;
        max-height: 95vh !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Handle bar di atas modal (swipe indicator) */
    .pdf-modal-head::before,
    #pdfModal .modal-header::before {
        content: '';
        display: block;
        width: 40px; height: 4px;
        background: rgba(0,0,0,0.15);
        border-radius: 2px;
        margin: 0 auto 12px;
    }

    /* Header lebih compact */
    .pdf-modal-head,
    #pdfModal .modal-header {
        padding: 12px 16px 10px !important;
        flex-shrink: 0;
    }

    .pdf-modal-title,
    #pdfModalTitle {
        font-size: 12.5px !important;
        max-width: calc(100vw - 120px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Toolbar actions di header */
    .pdf-modal-head {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* iframe mengisi sisa ruang */
    .pdf-modal-iframe,
    #pdfFrame {
        height: calc(95vh - 110px) !important;
        min-height: 300px !important;
        /* Aktifkan scroll dalam iframe */
        overflow: auto;
    }

    /* Footer lebih compact */
    .pdf-modal-foot,
    #pdfModal .modal-footer {
        padding: 10px 16px !important;
        gap: 8px !important;
        flex-shrink: 0;
        flex-wrap: nowrap !important;
    }

    /* Tombol footer full width di mobile */
    .btn-dl,
    #pdfDownload {
        flex: 1;
        justify-content: center;
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    .btn-close-m,
    #pdfModal .modal-footer .btn {
        flex: 1;
        justify-content: center;
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
}

/* ══════════════════════════════════════════════
   MOBILE KECIL — layar ≤480px
   ══════════════════════════════════════════════ */
@media (max-width: 480px) {

    .pdf-modal-iframe,
    #pdfFrame {
        height: calc(95vh - 120px) !important;
    }

    .pdf-modal-title,
    #pdfModalTitle {
        font-size: 12px !important;
        max-width: calc(100vw - 100px);
    }

    /* Sembunyikan sub text di mobile kecil */
    .pdf-modal-sub { display: none !important; }
}

/* ══════════════════════════════════════════════
   ANIMASI — slide up dari bawah di mobile
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .pdf-modal-box,
    #pdfModal .modal-content {
        animation: slideUpMobile 0.35s cubic-bezier(0.22,1,0.36,1) !important;
    }

    @keyframes slideUpMobile {
        from { transform: translateY(100%); opacity: 0.8; }
        to   { transform: translateY(0);   opacity: 1; }
    }
}

/* ══════════════════════════════════════════════
   BOOTSTRAP MODAL OVERRIDE (home.php)
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
    #pdfModal {
        padding: 0 !important;
    }
    #pdfModal .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }
    #pdfModal .modal-content {
        border-radius: 20px 20px 0 0 !important;
        max-height: 95vh;
    }
    #pdfModal .modal-body {
        padding: 0 !important;
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    #pdfFrame {
        flex: 1;
        height: calc(95vh - 130px) !important;
    }
}