{"id":360,"date":"2025-09-23T10:48:00","date_gmt":"2025-09-23T10:48:00","guid":{"rendered":"https:\/\/engine.iium.edu.my\/pdu\/?page_id=360"},"modified":"2025-10-10T03:59:21","modified_gmt":"2025-10-10T03:59:21","slug":"flowchart","status":"publish","type":"page","link":"https:\/\/engine.iium.edu.my\/pdu\/?page_id=360","title":{"rendered":"Flowchart"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"360\" class=\"elementor elementor-360\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6994077 e-flex e-con-boxed e-con e-parent\" data-id=\"6994077\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-d927cff e-con-full e-flex e-con e-child\" data-id=\"d927cff\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-903c30a e-grid e-con-full e-con e-child\" data-id=\"903c30a\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-25ddbad elementor-widget elementor-widget-hfe-site-tagline\" data-id=\"25ddbad\" data-element_type=\"widget\" data-widget_type=\"hfe-site-tagline.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"hfe-site-tagline hfe-site-tagline-wrapper\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\tKulliyyah of Engineering\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-abc6963 elementor-widget elementor-widget-hfe-site-title\" data-id=\"abc6963\" data-element_type=\"widget\" data-widget_type=\"hfe-site-title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t<div class=\"hfe-module-content hfe-heading-wrapper elementor-widget-heading\">\n\t\t\t\t\t\t\t<a href=\"https:\/\/engine.iium.edu.my\/pdu\">\n\t\t\t\t\t\t\t<h2 class=\"hfe-heading elementor-heading-title elementor-size-default\">\n\t\t\t\t\t\t\t\t\t<span class=\"hfe-heading-text\" >\n\t\t\t\t\t\t\t\t\t\tPartnership Development Unit (PDU)\t\t\t\t\t\t\t\t\t\t<\/span>\t\t\t\n\t\t\t<\/h2>\n\t\t\t<\/a>\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-978e2e3 e-con-full e-flex e-con e-child\" data-id=\"978e2e3\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a7aa233 elementor-widget elementor-widget-image\" data-id=\"a7aa233\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/office.iium.edu.my\/ocap\/wp-content\/uploads\/sites\/2\/2025\/08\/FULL_IIUM_Official_Logo_Regis_Horizontal_BLACK.png\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f6eb181 e-con-full e-flex e-con e-child\" data-id=\"f6eb181\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-59329f8 hfe-nav-menu__align-left hfe-submenu-icon-arrow hfe-submenu-animation-none hfe-link-redirect-child hfe-nav-menu__breakpoint-tablet elementor-widget elementor-widget-navigation-menu\" data-id=\"59329f8\" data-element_type=\"widget\" data-settings=\"{&quot;padding_horizontal_menu_item&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:23,&quot;sizes&quot;:[]},&quot;padding_vertical_menu_item&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:17,&quot;sizes&quot;:[]},&quot;padding_horizontal_menu_item_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_horizontal_menu_item_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_vertical_menu_item_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_vertical_menu_item_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;menu_space_between&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;menu_space_between_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;menu_space_between_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;menu_row_space&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;menu_row_space_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;menu_row_space_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;dropdown_border_radius&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;dropdown_border_radius_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;dropdown_border_radius_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;width_dropdown_item&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;220&quot;,&quot;sizes&quot;:[]},&quot;width_dropdown_item_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;width_dropdown_item_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_horizontal_dropdown_item&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_horizontal_dropdown_item_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_horizontal_dropdown_item_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_vertical_dropdown_item&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:15,&quot;sizes&quot;:[]},&quot;padding_vertical_dropdown_item_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_vertical_dropdown_item_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;distance_from_menu&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;distance_from_menu_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;distance_from_menu_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_size&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_size_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_size_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_border_width&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_border_width_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_border_width_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_border_radius&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_border_radius_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_border_radius_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"navigation-menu.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"hfe-nav-menu hfe-layout-horizontal hfe-nav-menu-layout horizontal hfe-pointer__none\" data-layout=\"horizontal\">\n\t\t\t\t<div role=\"button\" class=\"hfe-nav-menu__toggle elementor-clickable\">\n\t\t\t\t\t<span class=\"screen-reader-text\">Menu<\/span>\n\t\t\t\t\t<div class=\"hfe-nav-menu-icon\">\n\t\t\t\t\t\t<svg aria-hidden=\"true\"  class=\"e-font-icon-svg e-fas-align-justify\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-128H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-128H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-128H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z\"><\/path><\/svg>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<nav class=\"hfe-nav-menu__layout-horizontal hfe-nav-menu__submenu-arrow\" data-toggle-icon=\"&lt;svg aria-hidden=&quot;true&quot; tabindex=&quot;0&quot; class=&quot;e-font-icon-svg e-fas-align-justify&quot; viewBox=&quot;0 0 448 512&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;&lt;path d=&quot;M432 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-128H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-128H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-128H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;\" data-close-icon=\"&lt;svg aria-hidden=&quot;true&quot; tabindex=&quot;0&quot; class=&quot;e-font-icon-svg e-far-window-close&quot; viewBox=&quot;0 0 512 512&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;&lt;path d=&quot;M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h404c3.3 0 6 2.7 6 6v340zM356.5 194.6L295.1 256l61.4 61.4c4.6 4.6 4.6 12.1 0 16.8l-22.3 22.3c-4.6 4.6-12.1 4.6-16.8 0L256 295.1l-61.4 61.4c-4.6 4.6-12.1 4.6-16.8 0l-22.3-22.3c-4.6-4.6-4.6-12.1 0-16.8l61.4-61.4-61.4-61.4c-4.6-4.6-4.6-12.1 0-16.8l22.3-22.3c4.6-4.6 12.1-4.6 16.8 0l61.4 61.4 61.4-61.4c4.6-4.6 12.1-4.6 16.8 0l22.3 22.3c4.7 4.6 4.7 12.1 0 16.8z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;\" data-full-width=\"yes\">\n\t\t\t\t\t<ul id=\"menu-1-59329f8\" class=\"hfe-nav-menu\"><li id=\"menu-item-516\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-home parent hfe-creative-menu\"><a href=\"https:\/\/engine.iium.edu.my\/pdu\" class = \"hfe-menu-item\">Home<\/a><\/li>\n<\/ul> \n\t\t\t\t<\/nav>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-52cdba2 e-flex e-con-boxed e-con e-parent\" data-id=\"52cdba2\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a849a20 elementor-widget elementor-widget-shortcode\" data-id=\"a849a20\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style class=\"wpcode-css-snippet\">:root {\r\n    --bg-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n    --card: #fff;\r\n    --text-1: #2d3436;\r\n    --text-2: #495057;\r\n    --muted: #f8f9fa;\r\n    --border: #dee2e6;\r\n    --brand: #0984e3;\r\n    --brand-2: #74b9ff;\r\n    --shadow-sm: 0 4px 12px rgba(0, 0, 0, .1);\r\n    --shadow-md: 0 8px 25px rgba(0, 0, 0, .15);\r\n    --radius: 20px;\r\n    --safe-bottom: env(safe-area-inset-bottom, 0px);\r\n    --safe-top: env(safe-area-inset-top, 0px);\r\n}\r\n\r\n*,\r\n*::before,\r\n*::after {\r\n    box-sizing: border-box;\r\n}\r\n\r\nhtml,\r\nbody {\r\n    height: 100%;\r\n}\r\n\r\nbody {\r\n    margin: 0;\r\n    font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\";\r\n    background: white;\r\n    background-size: cover;\r\n    background-attachment: fixed;\r\n    color: var(--text-1);\r\n    min-height: 100svh;\r\n    padding: clamp(12px, 2vw, 24px);\r\n    line-height: 1.6;\r\n    -webkit-text-size-adjust: 100%;\r\n}\r\n\r\nh1 {\r\n    font-size: clamp(2rem, 1.5rem + 3vw, 2.8rem);\r\n    line-height: 1.2;\r\n}\r\n\r\nh3 {\r\n    font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.6rem);\r\n}\r\n\r\n.body-sm {\r\n    font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);\r\n}\r\n\r\n.container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    background: var(--card);\r\n    border-radius: var(--radius);\r\n    box-shadow: 0 20px 40px rgba(0, 0, 0, .1);\r\n    overflow: clip;\r\n}\r\n\r\n.header {\r\n    background: #262626;\r\n    color: #fff;\r\n    padding: clamp(20px, 3vw, 32px);\r\n    text-align: center;\r\n}\r\n\r\n.header p {\r\n    opacity: .9;\r\n    font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);\r\n}\r\n\r\n.legend {\r\n    background: var(--muted);\r\n    padding: clamp(16px, 2.5vw, 24px);\r\n    border-bottom: 1px solid var(--border);\r\n}\r\n\r\n.legend h3 {\r\n    margin-bottom: .75rem;\r\n}\r\n\r\n.legend-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));\r\n    gap: .6rem .9rem;\r\n    font-size: clamp(1.1rem, 1rem + .3vw, 1.3rem);\r\n}\r\n\r\n.legend-item {\r\n    color: var(--text-2);\r\n}\r\n\r\n.legend-item strong {\r\n    color: var(--text-1);\r\n}\r\n\r\n.flowchart {\r\n    padding: clamp(16px, 3vw, 40px);\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: clamp(12px, 1.6vw, 20px);\r\n}\r\n\r\n.node {\r\n    background: #fffce9; \/* always white *\/\r\n    border: 3px solid var(--border);\r\n    border-radius: 15px;\r\n    padding: clamp(14px, 2.2vw, 20px);\r\n    max-width: min(720px, 100%);\r\n    width: 100%;\r\n    text-align: center;\r\n    position: relative;\r\n    transition: transform .2s ease, box-shadow .2s ease; \/* no bg\/border color transitions *\/\r\n    cursor: pointer;\r\n    box-shadow: var(--shadow-sm);\r\n    word-wrap: break-word;\r\n    overflow-wrap: anywhere;\r\n    color: var(--text-1);\r\n}\r\n\r\n.node:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: var(--shadow-md);\r\n}\r\n\r\n\/* --- Neutralize all state-based color changes; keep everything white --- *\/\r\n.node.active,\r\n.node.completed {\r\n    background: #fffce9 !important;\r\n    border-color: var(--border) !important;\r\n    color: var(--text-1) !important;\r\n    transform: none; \/* no scale bump on active *\/\r\n}\r\n\r\n.node.start,\r\n.node.end,\r\n.node.decision {\r\n    background: #fffce9 !important;\r\n    border-color: var(--border) !important;\r\n    color: var(--text-1) !important;\r\n}\r\n\r\n\/* keep the decision pill shape without color *\/\r\n.node.decision {\r\n    border-radius: 50px;\r\n}\r\n\r\n.node h3 {\r\n    margin-bottom: .5rem;\r\n    font-weight: 600;\r\n}\r\n\r\n.node p,\r\n.node ul {\r\n    line-height: 1.55;\r\n    margin: .4rem 0;\r\n}\r\n\r\n.node ul {\r\n    text-align: left;\r\n    padding-left: 1.1rem;\r\n}\r\n\r\n.node li {\r\n    margin: .35rem 0;\r\n}\r\n\r\n.office-tag {\r\n    display: inline-block;\r\n    background: rgba(0, 0, 0, .04); \/* subtle since card is white *\/\r\n    padding: 4px 12px;\r\n    border-radius: 20px;\r\n    font-size: clamp(.9rem, .8rem + .3vw, 1.1rem);\r\n    font-weight: 500;\r\n    margin: 5px 5px 0 0;\r\n}\r\n\r\n.arrow {\r\n    font-size: clamp(20px, 2.2vw, 28px);\r\n    color: var(--brand-2);\r\n    transition: transform .2s ease;\r\n    user-select: none;\r\n}\r\n\r\n.arrow.active {\r\n    transform: translateY(-2px); \/* no color swap *\/\r\n}\r\n\r\n.decision-buttons {\r\n    margin-top: 12px;\r\n    display: flex;\r\n    gap: 10px;\r\n    justify-content: center;\r\n    flex-wrap: wrap;\r\n}\r\n\r\n.decision-btn {\r\n    background: #fff; \/* white *\/\r\n    border: 2px solid var(--border);\r\n    color: var(--text-2);\r\n    padding: 10px 18px;\r\n    border-radius: 999px;\r\n    cursor: pointer;\r\n    font-size: clamp(1.1rem, 1rem + .3vw, 1.3rem);\r\n    font-weight: 600;\r\n    transition: transform .15s ease, background .15s ease, border-color .15s ease;\r\n    min-height: 44px;\r\n}\r\n\r\n.decision-btn:hover {\r\n    background: #f7f7f7;\r\n}\r\n\r\n.step-counter {\r\n    position: fixed;\r\n    top: clamp(12px, 2vw, 24px);\r\n    right: clamp(12px, 2vw, 24px);\r\n    background: rgba(255, 255, 255, .92);\r\n    backdrop-filter: saturate(120%) blur(4px);\r\n    padding: 8px 14px;\r\n    border-radius: 999px;\r\n    font-weight: 700;\r\n    color: var(--text-1);\r\n    box-shadow: var(--shadow-sm);\r\n    z-index: 1000;\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n    * {\r\n        transition: none !important;\r\n        animation: none !important;\r\n    }\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n    .container {\r\n        border-radius: 16px;\r\n    }\r\n    .header {\r\n        padding: 24px;\r\n    }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .container {\r\n        margin: 8px;\r\n    }\r\n    .flowchart {\r\n        padding: 18px;\r\n        gap: 14px;\r\n    }\r\n    .node {\r\n        border-width: 2px;\r\n    }\r\n    .step-counter {\r\n        top: calc(10px + var(--safe-top));\r\n        right: 10px;\r\n        font-size: 1.1rem;\r\n        padding: 6px 12px;\r\n    }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .legend-grid {\r\n        grid-template-columns: 1fr;\r\n    }\r\n    .office-tag {\r\n        display: block;\r\n        margin: 6px 0 0;\r\n    }\r\n    .node ul {\r\n        padding-left: 1rem;\r\n    }\r\n    .arrow {\r\n        margin: 0;\r\n    }\r\n}<\/style><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e5bb7f1 elementor-widget elementor-widget-shortcode\" data-id=\"e5bb7f1\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><script>\/\/ ---- State ----\r\nlet currentStepIndex = 0;\r\nconst MAX_STEP = 10;        \/\/ 0..10\r\nconst DECISION_STEP = 6;\r\nlet approvalPath = null;    \/\/ 'approved' | 'rejected' | null\r\n\r\n\/\/ ---- Helpers ----\r\nconst $ = (sel) => document.querySelector(sel);\r\nconst $$ = (sel) => Array.from(document.querySelectorAll(sel));\r\n\r\nfunction updateStepCounter() {\r\n    const currentStepEl = document.getElementById('currentStep');\r\n    const totalStepsEl = document.getElementById('totalSteps');\r\n    if (currentStepEl) currentStepEl.textContent = currentStepIndex + 1;\r\n    if (totalStepsEl) totalStepsEl.textContent = 11;\r\n}\r\n\r\nfunction setNodeStates() {\r\n    \/\/ Clear states; we still mark classes for logic but styles are neutral\r\n    $$('.node').forEach((n, i) => {\r\n        n.classList.remove('active', 'completed');\r\n        n.removeAttribute('aria-current');\r\n        if (i < currentStepIndex) n.classList.add('completed');\r\n        if (i === currentStepIndex) {\r\n            n.classList.add('active');\r\n            n.setAttribute('aria-current', 'step');\r\n        }\r\n    });\r\n    \/\/ Arrow highlight (no color swap, just a tiny lift)\r\n    $$('.arrow').forEach((a, i) => a.classList.toggle('active', i <= currentStepIndex - 1));\r\n}\r\n\r\nfunction scrollActiveIntoView() {\r\n    const active = document.getElementById(`step${currentStepIndex}`);\r\n    if (!active) return;\r\n    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n    active.scrollIntoView({ behavior: prefersReduced ? 'auto' : 'smooth', block: 'center' });\r\n    active.focus({ preventScroll: true });\r\n}\r\n\r\nfunction goToStep(index) {\r\n    currentStepIndex = index;\r\n    updateStepCounter();\r\n    setNodeStates();\r\n    scrollActiveIntoView();\r\n}\r\n\r\nfunction approveCollaboration() {\r\n    approvalPath = 'approved';\r\n    $('#step7').style.display = 'none';\r\n    $('#step8').style.display = 'block';\r\n    $('#arrow8').style.display = 'block';\r\n    $('#step9').style.display = 'block';\r\n    $('#arrow9').style.display = 'block';\r\n    $('#step10').style.display = 'block';\r\n    goToStep(8);\r\n}\r\n\r\nfunction rejectCollaboration() {\r\n    approvalPath = 'rejected';\r\n    $('#step7').style.display = 'block';\r\n    ['step8', 'arrow8', 'step9', 'arrow9', 'step10'].forEach(id => {\r\n        const el = document.getElementById(id);\r\n        if (el) el.style.display = 'none';\r\n    });\r\n    goToStep(7);\r\n}\r\n\r\nfunction resetFlow() {\r\n    approvalPath = null;\r\n    for (let i = 0; i <= MAX_STEP; i++) {\r\n        const step = document.getElementById(`step${i}`);\r\n        const arrow = document.getElementById(`arrow${i}`);\r\n        if (step) step.style.display = (i <= DECISION_STEP) ? 'block' : 'none';\r\n        if (arrow) arrow.style.display = (i <= DECISION_STEP) ? 'block' : 'none';\r\n    }\r\n    goToStep(0);\r\n}\r\n\r\n\/\/ Initialize when DOM is loaded\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    \/\/ Navigation by clicking nodes (desktop convenience)\r\n    $$('.node').forEach((node, idx) => {\r\n        node.addEventListener('click', (e) => {\r\n            \/\/ Prevent clicks on decision buttons from triggering node navigation\r\n            if (node.id === 'step6' && e.target.closest('.decision-buttons')) return;\r\n            goToStep(idx);\r\n        });\r\n        node.addEventListener('keydown', (e) => {\r\n            if (node.id === 'step6' && e.target.closest('.decision-buttons')) return;\r\n            if (e.key === 'Enter' || e.key === ' ') {\r\n                e.preventDefault();\r\n                goToStep(idx);\r\n            }\r\n        });\r\n    });\r\n\r\n    \/\/ Decision buttons \u2014 stop bubbling so node handler doesn't run\r\n    const approveBtn = $('#approveBtn');\r\n    const rejectBtn = $('#rejectBtn');\r\n    \r\n    if (approveBtn) {\r\n        approveBtn.addEventListener('click', (e) => {\r\n            e.stopPropagation();\r\n            approveCollaboration();\r\n        });\r\n    }\r\n    \r\n    if (rejectBtn) {\r\n        rejectBtn.addEventListener('click', (e) => {\r\n            e.stopPropagation();\r\n            rejectCollaboration();\r\n        });\r\n    }\r\n\r\n    \/\/ Initialize the flow\r\n    resetFlow();\r\n});<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d6d67a6 e-flex e-con-boxed e-con e-parent\" data-id=\"d6d67a6\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-760f477 elementor-widget elementor-widget-html\" data-id=\"760f477\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t    <div class=\"container\">\r\n        <div class=\"header\" role=\"banner\">\r\n            <h1>\ud83d\udccb Partnership Collaboration Workflow<\/h1>\r\n            <p>Step-by-step guide for submitting collaboration documents<\/p>\r\n        <\/div>\r\n\r\n        <section class=\"legend\" aria-label=\"Legend & Abbreviations\">\r\n            <h3>\ud83d\udcda Legend & Abbreviations<\/h3>\r\n            <div class=\"legend-grid body-sm\">\r\n                <div class=\"legend-item\"><strong>PIC:<\/strong> Person in Charge \/ Focal Person<\/div>\r\n                <div class=\"legend-item\"><strong>MOU:<\/strong> Memorandum of Understanding<\/div>\r\n                <div class=\"legend-item\"><strong>MOA:<\/strong> Memorandum of Agreement<\/div>\r\n                <div class=\"legend-item\"><strong>RCA:<\/strong> Research Contract Agreement<\/div>\r\n                <div class=\"legend-item\"><strong>NDA:<\/strong> Non-Disclosure Agreement<\/div>\r\n                <div class=\"legend-item\"><strong>SSM:<\/strong> Suruhanjaya Syarikat Malaysia<\/div>\r\n                <div class=\"legend-item\"><strong>PDU:<\/strong> Partnership Development Unit<\/div>\r\n                <div class=\"legend-item\"><strong>IO:<\/strong> Office of Internationalization<\/div>\r\n                <div class=\"legend-item\"><strong>OIL:<\/strong> Office of Industrial Linkages<\/div>\r\n                <div class=\"legend-item\"><strong>RMC:<\/strong> Research Management Centre<\/div>\r\n                <div class=\"legend-item\"><strong>MCOM:<\/strong> Memorandum Assessment Committee<\/div>\r\n                <div class=\"legend-item\"><strong>OLA:<\/strong> Office of Legal Affairs<\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <main class=\"flowchart\" id=\"flowchart\" role=\"main\">\r\n            <div class=\"node start active\" id=\"step0\" tabindex=\"0\" aria-current=\"step\">\r\n                <h3>\ud83d\ude80 Start<\/h3>\r\n                <p>Collaboration initiated. Ready to begin the workflow process.<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"arrow\" id=\"arrow0\" aria-hidden=\"true\">\u2193<\/div>\r\n\r\n            <div class=\"node\" id=\"step1\" tabindex=\"0\">\r\n                <h3>\ud83d\udccb Document Preparation<\/h3>\r\n                <p><strong>PIC to prepare the following documents:<\/strong><\/p>\r\n                <ul>\r\n                    <li>Draft of MOU \/ MOA \/ RCA \/ NDA<\/li>\r\n                    <li>Planned activities<\/li>\r\n                    <li>Organization Profile<\/li>\r\n                    <li>SSM Registration (for industry collaboration)<\/li>\r\n                    <li>Financial information (for MOA, RCA with financial implications)<\/li>\r\n                <\/ul>\r\n                <p><em>Please refer to the templates provided<\/em><\/p>\r\n            <\/div>\r\n\r\n            <div class=\"arrow\" id=\"arrow1\" aria-hidden=\"true\">\u2193<\/div>\r\n\r\n            <div class=\"node\" id=\"step2\" tabindex=\"0\">\r\n                <h3>\ud83d\udce7 Submit to PDU<\/h3>\r\n                <p>PIC to email documents to Partnership Development Unit (PDU), KOE<\/p>\r\n                <p><strong>Email:<\/strong> pdu_koe@iium.edu.my<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"arrow\" id=\"arrow2\" aria-hidden=\"true\">\u2193<\/div>\r\n\r\n            <div class=\"node\" id=\"step3\" tabindex=\"0\">\r\n                <h3>\ud83c\udfe2 Categorization & Forwarding<\/h3>\r\n                <p>Collaboration categorized by PDU and forwarded to relevant offices:<\/p>\r\n                <div class=\"office-tag\">IO - International collaborations<\/div>\r\n                <div class=\"office-tag\">OIL - Industry collaborations<\/div>\r\n                <div class=\"office-tag\">RMC - Research collaborations<\/div>\r\n                <p><em>PIC will be cc-ed in this email as the focal person<\/em><\/p>\r\n            <\/div>\r\n\r\n            <div class=\"arrow\" id=\"arrow3\" aria-hidden=\"true\">\u2193<\/div>\r\n\r\n            <div class=\"node\" id=\"step4\" tabindex=\"0\">\r\n                <h3>\ud83d\udcdd MCOM Submission<\/h3>\r\n                <p>Documents submitted to Memorandum Assessment and Evaluation Committee (MCOM)<\/p>\r\n                <p><em>Under purview of Office of Legal Affairs (OLA)<\/em><\/p>\r\n            <\/div>\r\n\r\n            <div class=\"arrow\" id=\"arrow4\" aria-hidden=\"true\">\u2193<\/div>\r\n\r\n            <div class=\"node\" id=\"step5\" tabindex=\"0\">\r\n                <h3>\ud83e\udd1d MCOM Meeting<\/h3>\r\n                <p>MCOM meeting conducted<\/p>\r\n                <p><strong>PIC will be requested to attend the meeting<\/strong><\/p>\r\n            <\/div>\r\n\r\n            <div class=\"arrow\" id=\"arrow5\" aria-hidden=\"true\">\u2193<\/div>\r\n\r\n            <div class=\"node decision\" id=\"step6\" tabindex=\"0\">\r\n                <h3>\u2705 Approved?<\/h3>\r\n                <p>Decision point: Has the collaboration been approved by MCOM?<\/p>\r\n                <div class=\"decision-buttons\" role=\"group\" aria-label=\"Approval decision\">\r\n                    <button class=\"decision-btn\" id=\"approveBtn\">\u2705 Yes<\/button>\r\n                    <button class=\"decision-btn\" id=\"rejectBtn\">\u274c No<\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"arrow\" id=\"arrow6\" aria-hidden=\"true\">\u2193<\/div>\r\n\r\n            <div class=\"node\" id=\"step7\" style=\"display: none;\" tabindex=\"-1\">\r\n                <h3>\ud83d\udd04 Revision Required<\/h3>\r\n                <p>Collaboration not approved. PIC needs to revise documents and resubmit.<\/p>\r\n                <p><em>Return to document preparation phase<\/em><\/p>\r\n            <\/div>\r\n\r\n            <div class=\"node\" id=\"step8\" style=\"display: none;\" tabindex=\"-1\">\r\n                <h3>\u270d\ufe0f Signing Process<\/h3>\r\n                <p>Proceed with signing process<\/p>\r\n                <p><em>PIC will liaise with collaborator and respective offices for signing arrangement<\/em><\/p>\r\n                <ul>\r\n                    <li>Digital signature<\/li>\r\n                    <li>Online signing<\/li>\r\n                    <li>Physical signing ceremony<\/li>\r\n                <\/ul>\r\n            <\/div>\r\n\r\n            <div class=\"arrow\" id=\"arrow8\" style=\"display: none;\" aria-hidden=\"true\">\u2193<\/div>\r\n\r\n            <div class=\"node\" id=\"step9\" style=\"display: none;\" tabindex=\"-1\">\r\n                <h3>\ud83d\udcc4 Record Keeping<\/h3>\r\n                <p>Submit softcopy of signed MOU\/MOA\/NDA\/RCA to PDU for record keeping<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"arrow\" id=\"arrow9\" style=\"display: none;\" aria-hidden=\"true\">\u2193<\/div>\r\n\r\n            <div class=\"node end\" id=\"step10\" style=\"display: none;\" tabindex=\"-1\">\r\n                <h3>\ud83c\udf89 End - Collaboration Active<\/h3>\r\n                <p>Once documents are signed, PIC shall proceed with collaboration activities as planned<\/p>\r\n                <p><strong>Required:<\/strong> Provide scheduled updates to respective offices (IO\/OIL\/RMC)<\/p>\r\n            <\/div>\r\n        <\/main>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Kulliyyah of Engineering Partnership Development Unit (PDU) Menu Home \ud83d\udccb Partnership Collaboration Workflow Step-by-step guide for submitting collaboration documents \ud83d\udcda Legend &#038; Abbreviations PIC: Person in Charge \/ Focal Person MOU: Memorandum of Understanding MOA: Memorandum of Agreement RCA: Research Contract Agreement NDA: Non-Disclosure Agreement SSM: Suruhanjaya Syarikat Malaysia PDU: [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/template-pagebuilder-full-width.php","meta":{"footnotes":""},"class_list":["post-360","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/engine.iium.edu.my\/pdu\/index.php?rest_route=\/wp\/v2\/pages\/360","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/engine.iium.edu.my\/pdu\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/engine.iium.edu.my\/pdu\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/engine.iium.edu.my\/pdu\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/engine.iium.edu.my\/pdu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=360"}],"version-history":[{"count":32,"href":"https:\/\/engine.iium.edu.my\/pdu\/index.php?rest_route=\/wp\/v2\/pages\/360\/revisions"}],"predecessor-version":[{"id":539,"href":"https:\/\/engine.iium.edu.my\/pdu\/index.php?rest_route=\/wp\/v2\/pages\/360\/revisions\/539"}],"wp:attachment":[{"href":"https:\/\/engine.iium.edu.my\/pdu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}