/* Public Phase 54 - Enhanced Contact Page and Capitol Map */

.contact-page-enhanced{
    width:100%!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(320px,.8fr) minmax(520px,1.2fr)!important;
    gap:18px!important;
    align-items:stretch!important;
    margin-top:16px!important;
}

.contact-details-card,
.contact-map-card{
    border-radius:18px!important;
    border:1px solid #d9e4ef!important;
    box-shadow:0 14px 34px rgba(15,23,42,.08)!important;
    background:#ffffff!important;
    overflow:hidden!important;
}

.contact-details-card{
    padding:22px!important;
}

.contact-chip{
    display:inline-flex!important;
    align-items:center!important;
    padding:6px 10px!important;
    border-radius:999px!important;
    background:#eaf6ff!important;
    color:#075f96!important;
    border:1px solid #bfdbfe!important;
    font-size:11px!important;
    font-weight:900!important;
    letter-spacing:.05em!important;
    text-transform:uppercase!important;
    margin-bottom:10px!important;
}

.contact-details-card h3,
.contact-map-card h3{
    color:#073b63!important;
    font-size:25px!important;
    line-height:1.15!important;
    margin:0 0 14px!important;
    font-weight:900!important;
}

.contact-detail-list{
    display:grid!important;
    gap:12px!important;
    margin-top:16px!important;
}

.contact-detail-item{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:start!important;
    padding:13px!important;
    border-radius:14px!important;
    background:#f8fbff!important;
    border:1px solid #e1eaf2!important;
    border-left:4px solid #f1c232!important;
}

.contact-icon{
    width:38px!important;
    height:38px!important;
    border-radius:12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:#7e2b58!important;
    color:#ffffff!important;
    font-weight:900!important;
    font-size:17px!important;
    font-family:Arial,Helvetica,sans-serif!important;
}

.contact-detail-item strong{
    display:block!important;
    color:#0b2a52!important;
    font-size:13px!important;
    line-height:1.2!important;
    margin-bottom:4px!important;
    text-transform:uppercase!important;
    letter-spacing:.04em!important;
}

.contact-detail-item p{
    margin:0!important;
    color:#172033!important;
    font-size:15px!important;
    line-height:1.45!important;
    word-break:break-word!important;
}

.contact-detail-item a{
    color:#075f96!important;
    font-weight:800!important;
    text-decoration:none!important;
}

.contact-detail-item a:hover{
    text-decoration:underline!important;
}

.contact-map-card{
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
}

.contact-map-head{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:14px!important;
    padding:22px 22px 16px!important;
    border-bottom:1px solid #e1eaf2!important;
    background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
}

.contact-map-head h3{
    margin-bottom:8px!important;
}

.contact-map-head .muted{
    margin:0!important;
    color:#64748b!important;
    font-size:14px!important;
}

.contact-map-btn{
    flex:0 0 auto!important;
    margin-top:4px!important;
    background:#0870ad!important;
    color:#ffffff!important;
    border-radius:10px!important;
    padding:10px 13px!important;
    font-size:13px!important;
    white-space:nowrap!important;
}

.contact-map-frame-wrap{
    flex:1 1 auto!important;
    min-height:430px!important;
    background:#eef3f8!important;
    padding:0!important;
}

.contact-map-frame-wrap iframe,
.contact-map-frame{
    width:100%!important;
    height:430px!important;
    min-height:430px!important;
    border:0!important;
    display:block!important;
    border-radius:0!important;
}

.contact-map-frame-wrap .prose{
    margin:0!important;
}

.contact-map-frame-wrap .prose iframe{
    width:100%!important;
    min-height:430px!important;
    height:430px!important;
    border:0!important;
    display:block!important;
}

@media (max-width:1000px){
    .contact-page-enhanced{
        grid-template-columns:1fr!important;
    }

    .contact-map-frame-wrap,
    .contact-map-frame-wrap iframe,
    .contact-map-frame{
        min-height:360px!important;
        height:360px!important;
    }
}

@media (max-width:640px){
    .contact-page-enhanced{
        gap:12px!important;
        margin-top:10px!important;
    }

    .contact-details-card{
        padding:14px!important;
        border-radius:14px!important;
    }

    .contact-map-card{
        border-radius:14px!important;
    }

    .contact-details-card h3,
    .contact-map-card h3{
        font-size:20px!important;
    }

    .contact-detail-item{
        grid-template-columns:34px minmax(0,1fr)!important;
        gap:9px!important;
        padding:10px!important;
    }

    .contact-icon{
        width:32px!important;
        height:32px!important;
        font-size:14px!important;
        border-radius:9px!important;
    }

    .contact-detail-item p{
        font-size:13px!important;
    }

    .contact-map-head{
        display:block!important;
        padding:14px!important;
    }

    .contact-map-btn{
        margin-top:12px!important;
        width:100%!important;
        justify-content:center!important;
    }

    .contact-map-frame-wrap,
    .contact-map-frame-wrap iframe,
    .contact-map-frame{
        min-height:300px!important;
        height:300px!important;
    }
}

/* Public Phase 55 - Local Government Code nested submenu page */

.lgc-subnav{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    padding:12px!important;
    border-radius:14px!important;
    margin-bottom:14px!important;
    background:#ffffff!important;
    border:1px solid #dbe6ef!important;
    box-shadow:0 8px 22px rgba(15,23,42,.06)!important;
}

.lgc-subnav a{
    display:inline-flex!important;
    align-items:center!important;
    padding:9px 12px!important;
    border-radius:999px!important;
    background:#f3f8fd!important;
    border:1px solid #dbe6ef!important;
    color:#0b3a66!important;
    text-decoration:none!important;
    font-size:13px!important;
    font-weight:900!important;
}

.lgc-subnav a:hover,
.lgc-subnav a.active{
    background:#7e2b58!important;
    border-color:#7e2b58!important;
    color:#ffffff!important;
}

.lgc-content-card{
    border-radius:18px!important;
    border:1px solid #d9e4ef!important;
    box-shadow:0 14px 34px rgba(15,23,42,.08)!important;
    background:#ffffff!important;
    padding:24px!important;
}

.lgc-chip{
    display:inline-flex!important;
    align-items:center!important;
    margin-bottom:10px!important;
    padding:6px 10px!important;
    border-radius:999px!important;
    background:#eaf6ff!important;
    color:#075f96!important;
    border:1px solid #bfdbfe!important;
    font-size:11px!important;
    font-weight:900!important;
    letter-spacing:.05em!important;
    text-transform:uppercase!important;
}

.lgc-content-card h3{
    margin:0 0 14px!important;
    color:#073b63!important;
    font-size:28px!important;
    line-height:1.15!important;
    font-weight:900!important;
}

.lgc-content-card p{
    color:#172033!important;
    font-size:16px!important;
    line-height:1.75!important;
}

.lgc-grid{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;
    gap:12px!important;
    margin-top:16px!important;
}

.lgc-info-box{
    padding:16px!important;
    border-radius:14px!important;
    background:#f8fbff!important;
    border:1px solid #e1eaf2!important;
    border-left:4px solid #f1c232!important;
}

.lgc-info-box strong{
    display:block!important;
    color:#0b2a52!important;
    font-size:14px!important;
    text-transform:uppercase!important;
    letter-spacing:.04em!important;
    margin-bottom:6px!important;
}

.lgc-info-box p{
    margin:0!important;
    font-size:14px!important;
    line-height:1.55!important;
    color:#334155!important;
}

.lgc-highlight{
    margin-top:16px!important;
    padding:16px 18px!important;
    border-radius:14px!important;
    background:#fff8df!important;
    border:1px solid #f3d675!important;
    border-left:5px solid #f1c232!important;
    color:#1f2937!important;
    line-height:1.65!important;
    font-size:15px!important;
}

.lgc-list{
    margin-top:16px!important;
    padding:16px 18px!important;
    border-radius:14px!important;
    background:#f8fbff!important;
    border:1px solid #e1eaf2!important;
}

.lgc-list ul{
    margin-top:8px!important;
}

.lgc-extra-content{
    margin-top:18px!important;
    padding-top:16px!important;
    border-top:1px solid #e1eaf2!important;
}

@media(max-width:640px){
    .lgc-subnav{
        gap:6px!important;
        padding:10px!important;
    }

    .lgc-subnav a{
        width:100%!important;
        justify-content:center!important;
        font-size:12px!important;
    }

    .lgc-content-card{
        padding:16px!important;
        border-radius:14px!important;
    }

    .lgc-content-card h3{
        font-size:21px!important;
    }

    .lgc-content-card p{
        font-size:14px!important;
        line-height:1.65!important;
    }
}

/* Public Phase 56 - Mandate inside Local Government Code submenu */
.lgc-mandate-wrapper{
    margin-top:16px!important;
}

.lgc-mandate-wrapper .mandate-card,
.lgc-mandate-wrapper .mandate-sheet{
    margin-top:0!important;
}

.lgc-content-card .mandate-sheet{
    background:transparent!important;
}

.lgc-content-card .mandate-callout{
    margin-bottom:14px!important;
}


/* Public Phase 57 - Organizational Chart Small Monitor / Mobile Responsive Fix */

/* Keep desktop clean, but allow responsive overrides below */
.org-chart-card{
    max-width:100%!important;
    box-sizing:border-box!important;
}

/* Small laptop / small monitor */
@media (max-width:1320px){
    .org-chart-card{
        overflow-x:hidden!important;
        padding:28px 18px 28px!important;
        border-radius:18px!important;
    }

    .org-chart-title{
        font-size:30px!important;
        line-height:1.15!important;
        margin-bottom:14px!important;
    }

    .ppdo-org{
        min-width:0!important;
        max-width:100%!important;
        width:100%!important;
        padding:8px 8px 24px!important;
        margin:0 auto!important;
        box-sizing:border-box!important;
    }

    .ppdo-top-box{
        width:min(340px,100%)!important;
        max-width:100%!important;
    }

    .ppdo-sector-row{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:26px 18px!important;
    }

    .ppdo-support-row{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:26px 18px!important;
        margin-top:42px!important;
    }

    .ppdo-column-title{
        width:min(230px,100%)!important;
        min-height:68px!important;
        font-size:13px!important;
        border-radius:14px!important;
    }

    .ppdo-person-box{
        width:min(260px,100%)!important;
        min-height:96px!important;
        padding:10px 12px!important;
        border-radius:14px!important;
    }

    .ppdo-box-photo{
        width:48px!important;
        height:48px!important;
        margin-bottom:6px!important;
    }

    .ppdo-name{
        font-size:11px!important;
        line-height:1.15!important;
    }

    .ppdo-designation{
        font-size:10px!important;
        line-height:1.15!important;
    }

    .ppdo-legend{
        width:100%!important;
        max-width:100%!important;
        border-radius:14px!important;
        padding:14px!important;
    }
}

/* Tablet: simplify lines and make the chart fit */
@media (max-width:900px){
    main.wrap-wide{
        width:100%!important;
        max-width:100%!important;
        padding-left:6px!important;
        padding-right:6px!important;
        box-sizing:border-box!important;
    }

    .org-chart-card{
        width:100%!important;
        padding:18px 8px 20px!important;
        border-radius:14px!important;
        overflow-x:hidden!important;
    }

    .org-chart-title{
        font-size:22px!important;
        letter-spacing:.04em!important;
        line-height:1.18!important;
        margin-bottom:10px!important;
    }

    .ppdo-org{
        min-width:0!important;
        width:100%!important;
        max-width:100%!important;
        padding:4px 4px 16px!important;
    }

    .ppdo-vline{
        height:26px!important;
        border-left-width:3px!important;
    }

    .ppdo-main-branch{
        padding-top:22px!important;
    }

    /* remove wide horizontal red branches that break mobile layout */
    .ppdo-main-branch:before,
    .ppdo-main-branch:after,
    .ppdo-support-row:before{
        display:none!important;
        content:none!important;
    }

    .ppdo-sector-row,
    .ppdo-support-row{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:22px!important;
        margin-top:22px!important;
    }

    .ppdo-column{
        padding-top:0!important;
        width:100%!important;
    }

    .ppdo-column:before{
        display:none!important;
        content:none!important;
    }

    .ppdo-column-title{
        width:100%!important;
        max-width:360px!important;
        min-height:54px!important;
        font-size:12px!important;
        padding:8px 10px!important;
        border-radius:12px!important;
    }

    .ppdo-column-title:after{
        height:16px!important;
        border-left-width:3px!important;
    }

    .ppdo-list-item{
        width:100%!important;
        display:flex!important;
        justify-content:center!important;
        padding-top:16px!important;
    }

    .ppdo-list-item:before{
        height:16px!important;
        border-left-width:3px!important;
    }

    .ppdo-top-box,
    .ppdo-person-box{
        width:100%!important;
        max-width:360px!important;
        min-height:auto!important;
        padding:10px 12px!important;
        border-radius:12px!important;
    }

    .ppdo-top-box{
        max-width:380px!important;
    }

    .ppdo-top-box .ppdo-box-photo,
    .ppdo-box-photo{
        width:46px!important;
        height:46px!important;
        margin-bottom:5px!important;
    }

    .ppdo-name{
        font-size:10.5px!important;
        line-height:1.15!important;
        letter-spacing:.02em!important;
    }

    .ppdo-designation{
        font-size:9.5px!important;
        line-height:1.15!important;
        margin-top:3px!important;
    }

    .ppdo-legend{
        margin-top:18px!important;
        padding:12px!important;
        border-radius:12px!important;
    }

    .ppdo-legend h4{
        font-size:14px!important;
        margin-bottom:10px!important;
    }

    .ppdo-legend-grid{
        grid-template-columns:1fr!important;
        gap:7px!important;
    }

    .ppdo-legend-row{
        font-size:12px!important;
        gap:8px!important;
    }

    .ppdo-swatch{
        width:28px!important;
        height:14px!important;
    }
}

/* Small mobile */
@media (max-width:480px){
    main.wrap-wide{
        padding-left:3px!important;
        padding-right:3px!important;
    }

    .org-chart-card{
        padding:14px 5px 16px!important;
        border-radius:10px!important;
    }

    .org-chart-title{
        font-size:18px!important;
        letter-spacing:.05em!important;
        margin-bottom:8px!important;
    }

    .ppdo-org{
        padding-left:2px!important;
        padding-right:2px!important;
    }

    .ppdo-top-box,
    .ppdo-person-box{
        max-width:100%!important;
        padding:9px 8px!important;
        border-radius:10px!important;
    }

    .ppdo-column-title{
        max-width:100%!important;
        min-height:48px!important;
        font-size:10.5px!important;
        border-radius:10px!important;
    }

    .ppdo-top-box .ppdo-box-photo,
    .ppdo-box-photo{
        width:40px!important;
        height:40px!important;
        border-width:2px!important;
    }

    .ppdo-name{
        font-size:9.4px!important;
    }

    .ppdo-designation{
        font-size:8.4px!important;
    }

    .ppdo-vline{
        height:20px!important;
    }
}


/* Public Phase 59 - Org Chart Legend Color Sync */

/* These selectors make Settings, MIS preview, and Public Website use the same colors. */
.ppdo-person-box.ppdo-permanent,
.ppdo-top-box.ppdo-permanent,
.ppdo-swatch.ppdo-permanent{
    background:linear-gradient(180deg,#c9daf8 0%,#8fb0e5 100%)!important;
}

.ppdo-person-box.ppdo-detailed-to,
.ppdo-top-box.ppdo-detailed-to,
.ppdo-swatch.ppdo-detailed-to{
    background:linear-gradient(180deg,#eab7ef 0%,#d884dd 100%)!important;
}

.ppdo-person-box.ppdo-detailed-from,
.ppdo-top-box.ppdo-detailed-from,
.ppdo-swatch.ppdo-detailed-from{
    background:linear-gradient(180deg,#f9cfac 0%,#f2b07c 100%)!important;
}

.ppdo-person-box.ppdo-cos,
.ppdo-top-box.ppdo-cos,
.ppdo-swatch.ppdo-cos{
    background:linear-gradient(180deg,#b9e58d 0%,#90d14f 100%)!important;
}

.ppdo-person-box.ppdo-vacant,
.ppdo-top-box.ppdo-vacant,
.ppdo-swatch.ppdo-vacant{
    background:linear-gradient(180deg,#fff0b6 0%,#ffe07b 100%)!important;
}

.ppdo-person-box.ppdo-for-creation,
.ppdo-top-box.ppdo-for-creation,
.ppdo-swatch.ppdo-for-creation{
    background:linear-gradient(180deg,#ff8c8c 0%,#ff4d4d 100%)!important;
    color:#111!important;
}

.ppdo-person-box.ppdo-section,
.ppdo-top-box.ppdo-section,
.ppdo-swatch.ppdo-section{
    background:linear-gradient(180deg,#e6e6e6 0%,#bfbfbf 100%)!important;
}


/* Public/MIS Phase 61 - Final Organizational Chart Sync */
.ppdo-person-box.ppdo-permanent,.ppdo-top-box.ppdo-permanent,.ppdo-swatch.ppdo-permanent{background:linear-gradient(180deg,#c9daf8 0%,#8fb0e5 100%)!important}
.ppdo-person-box.ppdo-detailed-to,.ppdo-top-box.ppdo-detailed-to,.ppdo-swatch.ppdo-detailed-to{background:linear-gradient(180deg,#eab7ef 0%,#d884dd 100%)!important}
.ppdo-person-box.ppdo-detailed-from,.ppdo-top-box.ppdo-detailed-from,.ppdo-swatch.ppdo-detailed-from{background:linear-gradient(180deg,#f9cfac 0%,#f2b07c 100%)!important}
.ppdo-person-box.ppdo-cos,.ppdo-top-box.ppdo-cos,.ppdo-swatch.ppdo-cos{background:linear-gradient(180deg,#b9e58d 0%,#90d14f 100%)!important}
.ppdo-person-box.ppdo-vacant,.ppdo-top-box.ppdo-vacant,.ppdo-swatch.ppdo-vacant{background:linear-gradient(180deg,#fff0b6 0%,#ffe07b 100%)!important}
.ppdo-person-box.ppdo-for-creation,.ppdo-top-box.ppdo-for-creation,.ppdo-swatch.ppdo-for-creation{background:linear-gradient(180deg,#ff8c8c 0%,#ff4d4d 100%)!important;color:#111!important}
.ppdo-person-box.ppdo-section,.ppdo-top-box.ppdo-section,.ppdo-swatch.ppdo-section{background:linear-gradient(180deg,#e6e6e6 0%,#bfbfbf 100%)!important}


/* Phase 62 - Compact synchronized org chart view for Settings and Public */
.ppdo-org,
.ppdo-admin-org{
    min-width:1120px!important;
    max-width:1180px!important;
    width:1180px!important;
    padding-left:8px!important;
    padding-right:8px!important;
}

.ppdo-top-box{
    width:260px!important;
    min-height:96px!important;
    padding:10px 12px!important;
    border-radius:14px!important;
    align-items:center!important;
    justify-content:flex-start!important;
}

.ppdo-person-box{
    width:245px!important;
    min-height:88px!important;
    padding:10px 12px!important;
    border-radius:13px!important;
    align-items:center!important;
    justify-content:flex-start!important;
}

.ppdo-box-photo,
.ppdo-top-box .ppdo-box-photo{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    margin:0 0 6px!important;
    display:block!important;
}

.ppdo-name{
    font-size:11px!important;
    line-height:1.12!important;
    text-align:center!important;
    width:100%!important;
}

.ppdo-designation{
    font-size:10px!important;
    line-height:1.12!important;
    text-align:center!important;
    width:100%!important;
    margin-top:3px!important;
}

.ppdo-top-box .ppdo-name{
    font-size:11.5px!important;
}

.ppdo-column-title{
    width:205px!important;
    min-height:58px!important;
    font-size:12px!important;
    border-radius:12px!important;
}

.ppdo-sector-row{
    gap:26px!important;
}

.ppdo-support-row{
    gap:50px!important;
}

.ppdo-main-branch:before{
    left:8%!important;
    right:8%!important;
}

.ppdo-support-row:before{
    left:17%!important;
    right:17%!important;
}

/* Remove edit-only visuals from Settings preview while keeping entries editable by click/table */
.ppdo-admin-org-card .ppdo-edit-hint,
.ppdo-admin-org-card .ppdo-add-person,
.ppdo-admin-org-card .empty-photo,
.ppdo-admin-org-card .ppdo-top-box.empty,
.ppdo-admin-org-card .ppdo-person-box.empty{
    display:none!important;
}

.ppdo-admin-org-card .ppdo-person-box,
.ppdo-admin-org-card .ppdo-top-box{
    text-decoration:none!important;
}

/* For public modal view: avoid very wide empty card spaces */
.ppdo-public-modal-body .ppdo-org,
.ppdo-public-modal-body .ppdo-admin-org{
    margin-left:auto!important;
    margin-right:auto!important;
}

@media(max-width:1320px){
    .ppdo-org,
    .ppdo-admin-org{
        min-width:0!important;
        width:100%!important;
        max-width:100%!important;
    }

    .ppdo-top-box,
    .ppdo-person-box{
        width:100%!important;
        max-width:300px!important;
    }

    .ppdo-column-title{
        width:100%!important;
        max-width:260px!important;
    }
}

@media(max-width:900px){
    .ppdo-top-box,
    .ppdo-person-box{
        max-width:360px!important;
    }

    .ppdo-box-photo,
    .ppdo-top-box .ppdo-box-photo{
        width:42px!important;
        height:42px!important;
        min-width:42px!important;
        min-height:42px!important;
    }
}



/* Phase 63 - Public org chart: make red connector lines continuous */
.ppdo-main-branch{
    padding-top:48px !important;
    margin-top:4px !important;
}
.ppdo-main-branch:before{
    top:0 !important;
    left:11% !important;
    right:11% !important;
    border-top-width:4px !important;
}
.ppdo-main-branch:after{
    top:0 !important;
    height:48px !important;
}

.ppdo-sector-row{
    gap:30px !important;
}

.ppdo-sector-row .ppdo-column,
.ppdo-support-row .ppdo-column{
    padding-top:36px !important;
}

.ppdo-sector-row .ppdo-column:before,
.ppdo-support-row .ppdo-column:before{
    top:0 !important;
    height:36px !important;
}

.ppdo-column-title:after{
    height:26px !important;
}

.ppdo-list-item{
    padding-top:26px !important;
}
.ppdo-list-item:before{
    top:0 !important;
    height:26px !important;
}

/* Support row fix: move the horizontal branch to the actual top of the support row
   so it connects directly with the vertical lines below. */
.ppdo-support-row{
    position:relative !important;
    margin-top:72px !important;
    padding-top:34px !important;
    gap:54px !important;
}
.ppdo-support-row:before{
    top:0 !important;
    left:13% !important;
    right:13% !important;
    border-top-width:4px !important;
}

@media (max-width: 1320px){
    .ppdo-main-branch:before{left:8% !important; right:8% !important;}
    .ppdo-support-row:before{left:12% !important; right:12% !important;}
}

@media (max-width: 900px){
    .ppdo-main-branch,
    .ppdo-support-row{
        padding-top:26px !important;
    }
    .ppdo-main-branch:after,
    .ppdo-sector-row .ppdo-column:before,
    .ppdo-support-row .ppdo-column:before{
        height:26px !important;
    }
    .ppdo-support-row{
        margin-top:54px !important;
    }
    .ppdo-column-title:after,
    .ppdo-list-item:before{
        height:20px !important;
    }
    .ppdo-list-item{padding-top:20px !important;}
}



/* Phase 64 - Connected SVG red lines for public organizational chart */
.org-chart-card .ppdo-org{
    position:relative!important;
}

.org-chart-card .ppdo-org-lines{
    position:absolute!important;
    left:0!important;
    top:0!important;
    width:100%!important;
    height:100%!important;
    overflow:visible!important;
    pointer-events:none!important;
    z-index:0!important;
}

.org-chart-card .ppdo-org-lines line{
    stroke:#d62525!important;
    stroke-width:4!important;
    stroke-linecap:square!important;
}

.org-chart-card .ppdo-top-stack,
.org-chart-card .ppdo-main-branch,
.org-chart-card .ppdo-column,
.org-chart-card .ppdo-column-title,
.org-chart-card .ppdo-list,
.org-chart-card .ppdo-list-item,
.org-chart-card .ppdo-top-box,
.org-chart-card .ppdo-person-box{
    position:relative!important;
    z-index:2!important;
}

/* Hide old pseudo redlines to avoid broken/double lines. SVG lines will replace them. */
.org-chart-card .ppdo-vline{
    display:none!important;
}

.org-chart-card .ppdo-main-branch:before,
.org-chart-card .ppdo-main-branch:after,
.org-chart-card .ppdo-support-row:before,
.org-chart-card .ppdo-column:before,
.org-chart-card .ppdo-column-title:after,
.org-chart-card .ppdo-list-item:before{
    display:none!important;
    content:none!important;
}

/* Keep spacing for the SVG connectors */
.org-chart-card .ppdo-main-branch{
    padding-top:42px!important;
}

.org-chart-card .ppdo-column{
    padding-top:36px!important;
}

.org-chart-card .ppdo-list-item{
    padding-top:24px!important;
}

.org-chart-card .ppdo-support-row{
    padding-top:42px!important;
    margin-top:58px!important;
}



/* Phase 65 - Mobile support section order
   Mobile order: Administrative Support > Information Technology Support > Casuals.
*/
@media (max-width:900px){
    .ppdo-support-row .ppdo-column:nth-child(1){order:1!important;}
    .ppdo-support-row .ppdo-column:nth-child(2){order:2!important;}
    .ppdo-support-row .ppdo-column:nth-child(3){order:3!important;}
}


/* Phase 66 - Larger oval personnel photo beside name in public organizational chart */

/* Make personnel/top boxes horizontal: oval image on the left, name/details on the right */
.org-chart-card .ppdo-person-box,
.org-chart-card .ppdo-top-box{
    display:grid!important;
    grid-template-columns:76px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:12px!important;
    row-gap:2px!important;
    align-items:center!important;
    justify-items:start!important;
    text-align:left!important;
    width:270px!important;
    min-height:92px!important;
    padding:10px 13px!important;
}

/* Bigger oval photo */
.org-chart-card .ppdo-box-photo,
.org-chart-card .ppdo-top-box .ppdo-box-photo{
    grid-row:1 / 3!important;
    grid-column:1!important;
    width:70px!important;
    height:82px!important;
    min-width:70px!important;
    min-height:82px!important;
    max-width:70px!important;
    max-height:82px!important;
    border-radius:42% / 50%!important;
    object-fit:cover!important;
    object-position:center top!important;
    margin:0!important;
    border:3px solid rgba(255,255,255,.96)!important;
    box-shadow:0 5px 14px rgba(0,0,0,.20)!important;
    background:#eef3f8!important;
}

/* Name and designation aligned beside the image */
.org-chart-card .ppdo-name{
    grid-column:2!important;
    align-self:end!important;
    width:100%!important;
    text-align:left!important;
    font-size:11px!important;
    line-height:1.15!important;
    letter-spacing:.02em!important;
    margin:0!important;
    overflow-wrap:anywhere!important;
}

.org-chart-card .ppdo-designation{
    grid-column:2!important;
    align-self:start!important;
    width:100%!important;
    text-align:left!important;
    font-size:9.5px!important;
    line-height:1.15!important;
    margin:2px 0 0!important;
    overflow-wrap:anywhere!important;
}

/* Keep section headers centered */
.org-chart-card .ppdo-column-title{
    text-align:center!important;
    justify-items:center!important;
}

/* Top boxes can be a little wider for long names */
.org-chart-card .ppdo-top-box{
    width:285px!important;
    min-height:96px!important;
}

.org-chart-card .ppdo-top-box .ppdo-box-photo{
    width:72px!important;
    height:84px!important;
    min-width:72px!important;
    min-height:84px!important;
}

/* Modal/full profile photo remains controlled by personnel modal CSS */
.ppdo-person-profile-photo{
    object-position:center top!important;
}

/* Small monitor */
@media(max-width:1320px){
    .org-chart-card .ppdo-person-box,
    .org-chart-card .ppdo-top-box{
        width:100%!important;
        max-width:330px!important;
        grid-template-columns:74px minmax(0,1fr)!important;
    }

    .org-chart-card .ppdo-box-photo,
    .org-chart-card .ppdo-top-box .ppdo-box-photo{
        width:68px!important;
        height:80px!important;
        min-width:68px!important;
        min-height:80px!important;
    }
}

/* Mobile: still oval and large, beside name */
@media(max-width:900px){
    .org-chart-card .ppdo-person-box,
    .org-chart-card .ppdo-top-box{
        max-width:390px!important;
        min-height:94px!important;
        grid-template-columns:82px minmax(0,1fr)!important;
        column-gap:12px!important;
        padding:10px 12px!important;
    }

    .org-chart-card .ppdo-box-photo,
    .org-chart-card .ppdo-top-box .ppdo-box-photo{
        width:76px!important;
        height:86px!important;
        min-width:76px!important;
        min-height:86px!important;
        max-width:76px!important;
        max-height:86px!important;
        border-radius:42% / 50%!important;
    }

    .org-chart-card .ppdo-name{
        font-size:13px!important;
        line-height:1.15!important;
    }

    .org-chart-card .ppdo-designation{
        font-size:11px!important;
        line-height:1.2!important;
    }
}

/* Very small phones */
@media(max-width:430px){
    .org-chart-card .ppdo-person-box,
    .org-chart-card .ppdo-top-box{
        grid-template-columns:76px minmax(0,1fr)!important;
        min-height:88px!important;
        padding:9px 10px!important;
    }

    .org-chart-card .ppdo-box-photo,
    .org-chart-card .ppdo-top-box .ppdo-box-photo{
        width:70px!important;
        height:80px!important;
        min-width:70px!important;
        min-height:80px!important;
    }

    .org-chart-card .ppdo-name{
        font-size:11.5px!important;
    }

    .org-chart-card .ppdo-designation{
        font-size:9.8px!important;
    }
}



/* Phase 67 - Top stack redline connector visibility */
.org-chart-card .ppdo-org-lines{
    z-index:1!important;
}
.org-chart-card .ppdo-top-stack,
.org-chart-card .ppdo-main-branch,
.org-chart-card .ppdo-column{
    z-index:2!important;
}
.org-chart-card .ppdo-top-box,
.org-chart-card .ppdo-person-box,
.org-chart-card .ppdo-column-title{
    z-index:3!important;
}



/* Phase 68 - Force visible top-stack redline Governor > PPDC > APPDC
   This uses the actual .ppdo-vline HTML between top boxes, so it works even if SVG JS is cached or delayed.
*/
.org-chart-card .ppdo-top-stack > .ppdo-vline{
    display:block!important;
    width:0!important;
    height:28px!important;
    min-height:28px!important;
    max-height:28px!important;
    margin:0 auto!important;
    padding:0!important;
    border-left:4px solid #d62525!important;
    background:transparent!important;
    filter:drop-shadow(0 2px 2px rgba(214,37,37,.20))!important;
    position:relative!important;
    z-index:1!important;
    flex:0 0 28px!important;
}

/* Put boxes above the redline but keep the line visible in the gap */
.org-chart-card .ppdo-top-stack > .ppdo-top-box{
    position:relative!important;
    z-index:3!important;
}

/* Make sure the top stack keeps the vline gap instead of compressing it */
.org-chart-card .ppdo-top-stack{
    gap:0!important;
}

/* Mobile: make the top connector slightly longer and clear */
@media(max-width:900px){
    .org-chart-card .ppdo-top-stack > .ppdo-vline{
        height:30px!important;
        min-height:30px!important;
        flex-basis:30px!important;
    }
}



/* Phase 69 - LGC/Mandate synchronized content note */
.lgc-extra-content{
    background:#ffffff!important;
    border:1px solid #dbe6ef!important;
    border-radius:14px!important;
    padding:16px 18px!important;
    margin-top:14px!important;
}
.website-nav-card .website-nav-btn small{
    line-height:1.25!important;
}