/* Paste this CSS after the HTML or into your final CSS file */
#project-info-card.project-info-card { width:100% !important; max-width:1200px !important; margin:18px auto !important; box-sizing:border-box !important; padding:0 12px !important; }
#project-info-card .project-info-line { height:4px; background:#d32f2f; width:100%; border-radius:2px 2px 0 0; }
#project-info-card .project-info-container { background:#fff !important; border:1px solid #e6e6e6 !important; border-top:none !important; border-radius:0 0 6px 6px !important; overflow:hidden !important; box-shadow:0 1px 4px rgba(0,0,0,0.04) !important; }
#project-info-card .project-info-title { padding:14px 16px; text-align:center; font-weight:700; color:#222; background:#fafafa; }
#project-info-card .project-info-body { padding:0 12px 16px; }
#project-info-card .project-info-table { width:100% !important; border-collapse:collapse !important; text-align:center !important; color:#333 !important; table-layout:auto !important; }
#project-info-card .project-info-table thead th { padding:12px 10px !important; font-weight:700 !important; font-size:13px; color:#666 !important; border-bottom:1px solid #eee !important; }
#project-info-card .project-info-table tbody td { 
    padding:14px 10px !important; 
    border-bottom:1px solid #f6f6f6 !important; 
    color:#222 !important; 
    vertical-align:middle !important; 
    white-space:normal !important; 
    word-break:break-word !important; 
    overflow-wrap: anywhere !important; 
}
#project-info-card .project-info-table td span { display:inline-block; max-width:100%; word-break:break-word; overflow-wrap:anywhere; }

/* Desktop & Tablet: 3 optimized columns (min-width 768px) */
@media (min-width: 768px) {
    /* Kolom 1 (YEAR) dan Kolom 3 (COUNTRY) - 25% */
    #project-info-card .project-info-table thead th:nth-child(1),
    #project-info-card .project-info-table tbody td:nth-child(1),
    #project-info-card .project-info-table thead th:nth-child(3),
    #project-info-card .project-info-table tbody td:nth-child(3) { 
        width: 25% !important;
    }
    /* Kolom 2 (OWNER / CLIENT) - 50% */
    #project-info-card .project-info-table thead th:nth-child(2),
    #project-info-card .project-info-table tbody td:nth-child(2) { 
        width: 50% !important; 
    }
}

/* Mobile: stacked label:value view (max-width 767.98px) - PERBAIKAN UTAMA DI SINI */
@media (max-width: 767.98px) {
    #project-info-card { padding-left:12px !important; padding-right:12px !important; }
    #project-info-card .project-info-table { display:block !important; width:100% !important; }
    #project-info-card .project-info-table thead { display:none !important; }
    #project-info-card .project-info-table tbody,
    #project-info-card .project-info-table tr { display:block !important; width:100% !important; margin:0 0 10px 0 !important; border-bottom:1px solid #f1f1f1 !important; padding-bottom:8px !important; }
    #project-info-card .project-info-table td { 
        display:flex !important; 
        /* Diubah: Hapus justify-content:space-between agar data bisa mengambil sisa ruang */
        align-items:flex-start !important; 
        padding:10px 6px !important; 
        border:none !important; 
        font-size:14px !important; 
        white-space:normal !important; 
        word-break:break-word !important; 
        overflow-wrap: anywhere !important; 
    }
    /* SOLUSI: Menggunakan min-width untuk Label (::before) */
    #project-info-card .project-info-table td:nth-child(1)::before { 
        content:"YEAR"; font-weight:700; color:#444; margin-right:8px; 
        min-width:110px; /* Diubah dari 'width' agar tidak memaksakan lebar di ponsel yang sangat kecil */
        flex-shrink: 0; /* Pastikan label tidak menciut */
        display:inline-block; 
    }
    #project-info-card .project-info-table td:nth-child(2)::before { 
        content:"OWNER / CLIENT"; font-weight:700; color:#444; margin-right:8px; 
        min-width:110px; 
        flex-shrink: 0; 
        display:inline-block; 
    }
    #project-info-card .project-info-table td:nth-child(3)::before { 
        content:"COUNTRY"; font-weight:700; color:#444; margin-right:8px; 
        min-width:110px; 
        flex-shrink: 0; 
        display:inline-block; 
    }
    
    /* SOLUSI: Menggunakan flex-grow untuk Konten Data (span) */
    #project-info-card .project-info-table td span { 
        /* Hapus max-width: calc(100% - 120px); */
        flex-grow: 1; /* Pastikan data mengambil SEMUA sisa ruang */
        word-break: break-word !important; 
        overflow-wrap: anywhere !important; 
    }
    #project-info-card .project-info-note { padding-top:6px; text-align:center; color:#666; font-size:13px; }
}

/* allow wrapping and show ellipsis after max 2 lines, with native tooltip via title */
.cell-owner .truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* show at most 2 lines */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
}

/* ensure other cells wrap */
#project-info-table td span { word-break: break-word; overflow-wrap: anywhere; }

/* small visual polish so truncated text still readable */
#project-info-table td { vertical-align: middle; padding: 12px 10px; }

/* keep table layout flexible on desktop */
@media (min-width: 768px) {
  #project-info-table { table-layout: auto; }
}