{"html":"<div class=\"modern-modal\">\n    <!-- Modal Header -->\n    <div class=\"modal-header-modern\">\n        <div class=\"header-content\">\n            <div class=\"title-section\">\n                <h4 class=\"modal-title-modern\">CENORED ELECTRICAL ASSET NETWORK EVALUATION<\/h4>\n                <div class=\"reference-badge\">\n                    <i class=\"fas fa-hashtag me-1\"><\/i>\n                    <span>CS\/RFP\/CENO-6\/2026-2027\/FINCS\/FIN<\/span>\n                <\/div>\n            <\/div>\n            \n        <\/div>\n    <\/div>\n\n    <!-- Modal Body -->\n    <div class=\"modal-body-modern\">\n        <!-- Project Info Cards -->\n        <div class=\"info-cards-container\">\n            <div class=\"info-card\">\n                <div class=\"card-icon\">\n                    <i class=\"fas fa-calendar-alt\"><\/i>\n                <\/div>\n                <div class=\"card-content\">\n                    <h6 class=\"card-label\">Deadline<\/h6>\n                    <p class=\"card-value\">2026-11-10 10:00:00<\/p>\n                <\/div>\n            <\/div>\n            \n            <div class=\"info-card\">\n                <div class=\"card-icon\">\n                    <i class=\"fas fa-clock\"><\/i>\n                <\/div>\n                <div class=\"card-content\">\n                    <h6 class=\"card-label\">Listed On<\/h6>\n                    <p class=\"card-value\">2026-10-15<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Description Section -->\n        <div class=\"description-section-modern\">\n            <div class=\"section-header\">\n                <h5 class=\"section-title\">\n                    <i class=\"fas fa-align-left me-2\"><\/i>Project Description\n                <\/h5>\n            <\/div>\n            <div class=\"description-content-modern\">\n                <p><strong><span>2. Scope of Work<\/span><\/strong><\/p>\r\n<p><span>The Consultant shall undertake a comprehensive condition assessment, verification, and valuation of CENORED's Medium Voltage (MV) and Low Voltage (LV) electricity distribution assets across all CENORED operating areas. The scope of work shall include, but not be limited to, the following activities:<\/span><\/p>\r\n<p><strong><span>2.1 Physical Asset Inspection and Verification<\/span><\/strong><\/p>\r\n<p><span>The Consultant shall conduct detailed physical inspections of the electricity distribution assets located throughout the CENORED area of operation. The purpose of the inspections is to verify the existence, condition, configuration, and location of each asset forming part of CENORED's electricity distribution network.<\/span><\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Attachments Section -->\n            <\/div>\n\n    <!-- Modal Footer -->\n    <div class=\"modal-footer-modern\">\n        <div class=\"footer-content\">\n                                                <button type=\"button\" class=\"btn-modern btn-primary-modern\" \n                            data-bs-toggle=\"modal\" \n                            data-bs-target=\"#tenderBoxModal\">\n                        <i class=\"fas fa-file-signature me-2\"><\/i>Submit Quote\n                    <\/button>\n                                        \n            <button type=\"button\" class=\"btn-modern btn-secondary-modern\" data-bs-dismiss=\"modal\">\n                <i class=\"fas fa-times me-2\"><\/i>Close\n            <\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n.modern-modal {\n    background: #ffffff;\n    border-radius: 16px;\n    overflow: hidden;\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);\n}\n\n\/* Modal Header *\/\n.modal-header-modern {\n    background: linear-gradient(135deg, #65a653 0%, #65a653 100%);\n    color: white;\n    padding: 1.5rem 2rem;\n    position: relative;\n}\n\n.header-content {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 1rem;\n}\n\n.title-section {\n    flex: 1;\n}\n\n.modal-title-modern {\n    font-size: 1.5rem;\n    font-weight: 700;\n    margin: 0 0 0.5rem 0;\n    line-height: 1.3;\n}\n\n.reference-badge {\n    display: inline-flex;\n    align-items: center;\n    background: rgba(255, 255, 255, 0.2);\n    padding: 0.25rem 0.75rem;\n    border-radius: 20px;\n    font-size: 0.85rem;\n    font-weight: 600;\n    backdrop-filter: blur(10px);\n}\n\n.close-btn-modern {\n    background: rgba(255, 255, 255, 0.2);\n    border: none;\n    color: white;\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    backdrop-filter: blur(10px);\n}\n\n.close-btn-modern:hover {\n    background: rgba(255, 255, 255, 0.3);\n    transform: scale(1.1);\n}\n\n\/* Modal Body *\/\n.modal-body-modern {\n    padding: 2rem;\n}\n\n\/* Info Cards *\/\n.info-cards-container {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 1rem;\n    margin-bottom: 2rem;\n}\n\n.info-card {\n    background: #f8f9fa;\n    border: 1px solid #e9ecef;\n    border-radius: 12px;\n    padding: 1.25rem;\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    transition: all 0.3s ease;\n}\n\n.info-card:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);\n    border-color: #667eea;\n}\n\n.card-icon {\n    width: 50px;\n    height: 50px;\n    background: linear-gradient(135deg, #65a653 0%, #65a653 100%);\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 1.2rem;\n}\n\n.card-content {\n    flex: 1;\n}\n\n.card-label {\n    font-size: 0.8rem;\n    font-weight: 600;\n    color: #6c757d;\n    margin: 0 0 0.25rem 0;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.card-value {\n    font-size: 1rem;\n    font-weight: 700;\n    color: #2c3e50;\n    margin: 0;\n}\n\n\/* Description Section *\/\n.description-section-modern {\n    margin-bottom: 2rem;\n}\n\n.section-header {\n    margin-bottom: 1rem;\n}\n\n.section-title {\n    font-size: 1.1rem;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0;\n    display: flex;\n    align-items: center;\n}\n\n.section-title i {\n    color: #667eea;\n}\n\n.description-content-modern {\n    background: #f8f9fa;\n    border: 1px solid #e9ecef;\n    border-radius: 12px;\n    padding: 1.5rem;\n    line-height: 1.7;\n    color: #495057;\n}\n\n.description-content-modern p {\n    margin-bottom: 1rem;\n}\n\n.description-content-modern p:last-child {\n    margin-bottom: 0;\n}\n\n\/* Attachments Section *\/\n.attachments-section-modern {\n    margin-bottom: 1rem;\n}\n\n.attachments-container-modern {\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n}\n\n.attachment-item-modern {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    padding: 1rem;\n    background: #f8f9fa;\n    border: 1px solid #e9ecef;\n    border-radius: 12px;\n    text-decoration: none;\n    color: inherit;\n    transition: all 0.3s ease;\n}\n\n.attachment-item-modern:hover {\n    background: #e9ecef;\n    border-color: #667eea;\n    transform: translateX(5px);\n    text-decoration: none;\n    color: inherit;\n}\n\n.attachment-icon {\n    width: 40px;\n    height: 40px;\n    background: #667eea;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 1rem;\n}\n\n.attachment-details {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n}\n\n.attachment-name {\n    font-weight: 600;\n    color: #2c3e50;\n    font-size: 0.9rem;\n}\n\n.attachment-action {\n    font-size: 0.8rem;\n    color: #6c757d;\n}\n\n.attachment-arrow {\n    color: #667eea;\n    font-size: 0.9rem;\n}\n\n.no-attachments-modern {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    padding: 1.5rem;\n    background: #fff5f5;\n    border: 1px solid #fed7d7;\n    border-radius: 12px;\n    color: #c53030;\n    font-weight: 500;\n}\n\n.no-attachments-modern i {\n    font-size: 1.2rem;\n}\n\n\/* Modal Footer *\/\n.modal-footer-modern {\n    background: #f8f9fa;\n    border-top: 1px solid #e9ecef;\n    padding: 1.5rem 2rem;\n}\n\n.footer-content {\n    display: flex;\n    justify-content: flex-end;\n    gap: 1rem;\n    flex-wrap: wrap;\n}\n\n.btn-modern {\n    padding: 0.75rem 1.5rem;\n    border: none;\n    border-radius: 25px;\n    font-weight: 600;\n    font-size: 0.9rem;\n    text-decoration: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    min-width: 120px;\n}\n\n.btn-primary-modern {\n    background: linear-gradient(135deg, #65a653 0%, #65a653 100%);\n    color: white;\n}\n\n.btn-primary-modern:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);\n    color: white;\n    text-decoration: none;\n}\n\n.btn-secondary-modern {\n    background: #6c757d;\n    color: white;\n}\n\n.btn-secondary-modern:hover {\n    background: #5a6268;\n    transform: translateY(-2px);\n    box-shadow: 0 8px 25px rgba(108, 117, 125, 0.4);\n    color: white;\n    text-decoration: none;\n}\n\n\/* Responsive Design *\/\n@media (max-width: 768px) {\n    .modal-header-modern,\n    .modal-body-modern,\n    .modal-footer-modern {\n        padding: 1rem;\n    }\n    \n    .header-content {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 1rem;\n    }\n    \n    .modal-title-modern {\n        font-size: 1.25rem;\n    }\n    \n    .info-cards-container {\n        grid-template-columns: 1fr;\n    }\n    \n    .footer-content {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    \n    .btn-modern {\n        width: 100%;\n    }\n}\n\n@media (max-width: 480px) {\n    .modern-modal {\n        border-radius: 0;\n    }\n    \n    .info-card {\n        flex-direction: column;\n        text-align: center;\n        gap: 0.75rem;\n    }\n    \n    .attachment-item-modern {\n        flex-direction: column;\n        text-align: center;\n        gap: 0.75rem;\n    }\n}\n\n\/* Animation for better UX *\/\n.info-card,\n.attachment-item-modern {\n    animation: slideInUp 0.6s ease forwards;\n    opacity: 0;\n    transform: translateY(20px);\n}\n\n.info-card:nth-child(1) { animation-delay: 0.1s; }\n.info-card:nth-child(2) { animation-delay: 0.2s; }\n.attachment-item-modern:nth-child(1) { animation-delay: 0.3s; }\n.attachment-item-modern:nth-child(2) { animation-delay: 0.4s; }\n.attachment-item-modern:nth-child(3) { animation-delay: 0.5s; }\n\n@keyframes slideInUp {\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n\/* Focus states for accessibility *\/\n.close-btn-modern:focus,\n.btn-modern:focus {\n    outline: 2px solid #667eea;\n    outline-offset: 2px;\n}\n\n\/* Loading state for buttons *\/\n.btn-modern:active {\n    transform: scale(0.98);\n}\n<\/style>\n"}