body::-webkit-scrollbar {
    display: none;
}
body {
    background-color: #F3F4F6;
    background-image: url(../images/bg-dot-matrix.png);
    background-size: contain;
    background-repeat: repeat;
    overflow: hidden;
    max-height: 100vh;
}

#diagram-container {
    width: 100%;
    height: calc(100vh - 100px);
}

#content-wrapper {
    transform-origin: 0 0;
    position: relative;
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    counter-reset: goal-number;
}

#svg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 0
}

.connector-path {
    stroke-width: 1.5;
    fill: none;
    transition: d 0.1s ease-in-out;
}

.node-box {
    position: relative;
    margin-bottom: 32px;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, margin-bottom 0.3s ease-in-out
}
.node-box:last-child { margin-bottom: 0; }
.node-box .node-box-wrapper { border-radius: 16px; }
.node-box.department-box.state-expanded .node-box-wrapper { box-shadow: 0px 4px 6px 0px #0000000D; }
.node-box.department-box.state-collapsed .node-title-bg { border-radius: 16px; }
.department-box .dept-tag { border: none; }
.department-box .dept-tag img { filter: invert(7%) sepia(16%) saturate(2226%) hue-rotate(182deg) brightness(92%) contrast(93%); }
.goal-box {
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    overflow: hidden;
    border-radius: 16px;
}

.node-title-bg {
    position: relative;
    transition: background-color 0.2s ease
}

.department-box .node-title-bg {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    padding: 6px 12px;
    border-radius: 16px 16px 0 0;
    cursor: pointer;
}

.goal-box .node-title-bg {
    background: #E5E7EB;
    padding: 0.75rem;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    padding: 6px 12px;
    cursor: pointer;
}

.goal-box .node-title-bg h3 {
    position: relative;
    padding-left: 30px;
}

.goal-box .node-title-bg h3::before {
    position: absolute;
    top: 0;
    left: -5px;
    counter-increment: goal-number;
    content: counter(goal-number);
    display: inline-block;
    width: 27px;
    height: 27px;
    border-radius: 12px 8px 8px;
    background-color: #ffffff;
    border: 1px solid #D2D5DA;
    text-align: center;
    line-height: 27px;
    font-size: 18px;
    color: #111827;
}

.orange-node .node-box-wrapper .collapsible-content {
    background-color: var(--color-dept-procurement-body);
    border-color: var(--color-dept-procurement-title);
}

.green-node .node-box-wrapper .collapsible-content {
    background-color: var(--color-dept-marketing-body);
    border-color: var(--color-dept-marketing-title);
}

.blue-node .node-box-wrapper .collapsible-content {
    background-color: var(--color-dept-sales-body);
    border-color: var(--color-dept-sales-title);
}

.purple-node .node-box-wrapper .collapsible-content {
    background-color: var(--color-dept-operations-body);
    border-color: var(--color-dept-operations-title);
}

.dark-blue-node .node-box-wrapper .collapsible-content {
    background-color: var(--color-dept-it-body);
    border-color: var(--color-dept-it-title);
}

.dark-purple-node .node-box-wrapper .collapsible-content {
    background-color: var(--color-dept-hr-body);
    border-color: var(--color-dept-hr-title);
}

.yellow-node .node-box-wrapper .collapsible-content {
    background-color: var(--color-dept-finance-body);
    border-color: var(--color-dept-finance-title);
}

.grey-node .node-box-wrapper .collapsible-content {
    background-color: var(--color-dept-admin-body);
    border-color: var(--color-dept-admin-title);
}


.orange-node .node-title-bg {
    background-color: var(--color-dept-procurement-title);
}

.green-node .node-title-bg {
    background-color: var(--color-dept-marketing-title);
}

.blue-node .node-title-bg {
    background-color: var(--color-dept-sales-title);
}

.purple-node .node-title-bg {
    background-color: var(--color-dept-operations-title);
}

/* Title background colors */
.dark-blue-node .node-title-bg {
    background-color: var(--color-dept-it-title);
}

.dark-purple-node .node-title-bg {
    background-color: var(--color-dept-hr-title);
}

.yellow-node .node-title-bg {
    background-color: var(--color-dept-finance-title);
}

.grey-node .node-title-bg {
    background-color: var(--color-dept-admin-title);
}

.orange-node .node-title-bg:hover {
    background-color: var(--color-dept-procurement-title);
    filter: brightness(95%);
}

.green-node .node-title-bg:hover {
    background-color: var(--color-dept-marketing-title);
    filter: brightness(95%);
}

.blue-node .node-title-bg:hover {
    background-color: var(--color-dept-sales-title);
    filter: brightness(95%);
}

.purple-node .node-title-bg:hover {
    background-color: var(--color-dept-operations-title);
    filter: brightness(95%);
}

/* Hover states */
.dark-blue-node .node-title-bg:hover {
    background-color: var(--color-dept-it-title);
    filter: brightness(95%);
}

.dark-purple-node .node-title-bg:hover {
    background-color: var(--color-dept-hr-title);
    filter: brightness(95%);
}

.yellow-node .node-title-bg:hover {
    background-color: var(--color-dept-finance-title);
    filter: brightness(95%);
}

.grey-node .node-title-bg:hover {
    background-color: var(--color-dept-admin-title);
    filter: brightness(95%);
}

.connection-point {
    width: 10px;
    height: 10px;
    background-color: #D2D5DA;
    border-radius: 9999px;
    position: absolute;
}

.connection-point.right-col { opacity: 0; }
.orange-node .node-box-wrapper .connection-point { background-color: var(--color-dept-procurement-title); }
.green-node .node-box-wrapper .connection-point { background-color: var(--color-dept-marketing-title); }
.blue-node .node-box-wrapper .connection-point { background-color: var(--color-dept-sales-title); }
.purple-node .node-box-wrapper .connection-point { background-color: var(--color-dept-operations-title); }

/* Connection points */
.dark-blue-node .node-box-wrapper .connection-point {
    background-color: var(--color-dept-it-title);
}

.dark-purple-node .node-box-wrapper .connection-point {
    background-color: var(--color-dept-hr-title);
}

.yellow-node .node-box-wrapper .connection-point {
    background-color: var(--color-dept-finance-title);
}

.grey-node .node-box-wrapper .connection-point {
    background-color: var(--color-dept-admin-title);
}

.department-box .connection-point.left-col {
    top: 100%;
    right: 0;
    transform: translate(50%, -50%);
}

.goal-box .connection-point.right-col {
    top: 100%;
    left: 0;
    transform: translate(-50%, -50%);
}

body:not(:has(.state-expanded)) .goal-box .connection-point.stack-1 {
    transform: translate(-50%, calc(-50% + 0px));
}

body:not(:has(.state-expanded)) .goal-box .connection-point.stack-2 {
    transform: translate(-50%, calc(-50% + 15px));
}

body:not(:has(.state-expanded)) .goal-box .connection-point.stack-3 {
    transform: translate(-50%, calc(-50% + 30px));
}

body:not(:has(.state-expanded)) .goal-box .connection-point.stack-4 {
    transform: translate(-50%, calc(-50% + 45px));
}

body:not(:has(.state-expanded)) .goal-box .connection-point.stack-5 {
    transform: translate(-50%, calc(-50% + 60px));
}

body:not(:has(.state-expanded)) .goal-box .connection-point.stack-6 {
    transform: translate(-50%, calc(-50% + 75px));
}

.dept-control-icons {
    position: relative;
    width: 1rem;
    height: 1rem;
    color: #6b7280;
}

.dept-control-icons img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s ease-in-out, transform 0.3s ease-in-out, color 0.2s ease-in-out;
}

.dept-control-icons:hover {
    color: #1f2937;
}

.icon-arrow {
    opacity: 1;
}

.icon-close {
    opacity: 0;
}

.goal-box .collapse-btn { width: 16px; height: 16px; }

.goal-box .collapse-btn {
    cursor: pointer;
}

.goal-box .collapse-btn img {
    width: 100%;
    max-width: 12px;
}

.department-box .collapsible-content {
    max-height: 500px;
    overflow: hidden;
    display: block;
    font-size: 16px;
    color: #111827;
    padding: 12px;
    border: 2px solid;
    border-radius: 0 0 16px 16px;
    border-top: none;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.department-box .collapsible-content h4 { font-size: 14px; color: #6D7280; }
.department-box .collapsible-content p,
.department-box-wrapper .collapsible-content p { margin-bottom: 5px; text-decoration: underline; text-underline-offset: 3px; }
.department-box .collapsible-content .position-col { width: 44%; }
.department-box .collapsible-content .process-col { width: 28%; }
.department-box .collapsible-content .connected-goal-col { width: 28%; }

.department-box .process-section {
    max-height: 0;
    display: none;
}

.department-box .icon-arrow {
    opacity: 1;
}

.department-box .icon-close {
    opacity: 0;
    transform: scale(0.8);
}

.department-box.state-collapsed .node-box-wrapper .connection-point,
.department-box.state-expanded .node-box-wrapper .connection-point { opacity: 0; }

.department-box.state-collapsed .collapsible-content {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border: none;
}

.department-box.state-collapsed .process-section {
    max-height: 0;
    padding: 0 1rem 0 1rem;
}

.department-box.state-collapsed .icon-arrow {
    opacity: 1;
}

.department-box.state-collapsed .icon-close {
    opacity: 0;
}

.department-box.state-collapsed .node-title-bg:hover {
    filter: none;
}

.department-box.state-expanded .process-section {
    max-height: unset;
    display: block;
}

.department-box.state-expanded .node-box-wrapper .icon-arrow {
    opacity: 0;
}
.toggler .icon-arrow { cursor: pointer; }
.department-box.state-expanded .node-box-wrapper .icon-close {
    opacity: 1;
}

.goal-box.hidden-goal {
    opacity: 0;
    max-height: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
    pointer-events: none;
    overflow: hidden;
}

.main-process-block {
    margin-top: 28px;
}

.main-process-title-bar {
    background-color: #D2D5DA;
    padding: 6px 12px;
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    position: relative;
}
.main-process-title-bar h5 { position: relative; padding-left: 28px; }
.main-process-title-bar h5::before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 0; background-image: url(../images/main-process-icon.svg); background-position: center; background-size: contain; background-repeat: no-repeat; height: 18px; width: 18px; }
.main-process-meta {
    padding: 12px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    border: 2px solid #D2D5DA;
    border-radius: 0 0 16px 0px;
    border-top: none;
}

.sub-processes-list {
    padding-left: 25px;
    display: block;
}

.sub-process-block {
    border-top: 1px solid #e5e7eb;
}

.sub-process-title-bar {
    background-color: #E5E7EB;
    padding: 6px 12px;
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    position: relative;
}
.sub-process-title-bar h5 { position: relative; padding-left: 28px; }
.sub-process-title-bar h5::before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 0; background-image: url(../images/sub-process-icon.svg); background-position: center; background-size: contain; background-repeat: no-repeat; height: 18px; width: 18px; }
.sub-process-objective {
    padding: 12px;
    border: 2px solid #E5E7EB;
    border-top: 0;
    border-radius: 0 0 16px 16px;
}
.sub-process-objective .copy > img { filter: invert(46%) sepia(7%) saturate(737%) hue-rotate(182deg) brightness(93%) contrast(89%); }
.sub-process-objective strong {
    color: #374151;
    font-weight: 500;
    display: block;
    margin-bottom: 0.25rem;
}

.process-id {
    padding: 2px 8px; border-radius: 20px; font-size: 14px; font-weight: 400; background: #ffffff; color: #111827; line-height: 1;
}

.icon-sm {
    width: 1rem;
    height: 1rem;
    color: #9ca3af;
}

.icon-sm:hover {
    color: #4b5563;
}

.process-tag-placeholder {
    display: block;
    margin-bottom: 5px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dept-tag {
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 400;
    background: #ffffff;
    color: #111827;
    border: 2px solid #ffffff;
    line-height: 1;
}

.goal-box .dept-tag + .dept-tag{
    margin-left: -10px;
}

.goal-box .dept-tag-prc {
    background-color: var(--color-dept-procurement-title);
}

.goal-box .dept-tag-lon {
    background-color: var(--color-dept-marketing-title);
}

.goal-box .dept-tag-sls {
    background-color: var(--color-dept-sales-title);
}

.goal-box .dept-tag-opr {
    background-color: var(--color-dept-operations-title);
}

.dept-tag-mrk {
    background-color: var(--color-dept-tag-mrk-bg);
}

.dept-tag-it {
    background-color: var(--color-dept-tag-it-bg);
}

.dept-tag-hr {
    background-color: var(--color-dept-tag-hr-bg);
}

.dept-tag-fin {
    background-color: var(--color-dept-tag-fin-bg);
}

.dept-tag-adm {
    background-color: var(--color-dept-tag-adm-bg);
}

.dept-tag-lgn {
    background-color: var(--color-dept-tag-lgn-bg);
}

.progress-bar-bg {
    background-color: #e5e7eb;
    border-radius: 9999px;
    height: 0.5rem;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 9999px;
}
.process-section .main-process-block .main-process-box { background: #ffffff; border-radius: 16px; margin-bottom: 20px; position: relative; }
.process-section .main-process-block .main-process-box:before { content: ''; position: absolute; bottom: -3px; left: -3px; background: #D2D5DA; border-radius: 50%; height: 10px; width: 10px; }
.process-section .main-process-block .sub-process-block { background: #ffffff; border-radius: 16px; margin-bottom: 12px; position: relative; z-index: 1; }
.process-section .main-process-block .sub-process-block .sub-process-title-bar > img { position: absolute; bottom: 0; left: -30px; width: 33px; z-index: -1; }
.process-section .toggle-wrapper.collapsed .main-process-box .main-process-meta { border-radius: 0 0 16px 16px; }
#diagram-container .department-col { padding-right: 5px; }
#diagram-container .department-col,
#diagram-container .goal-col { width: 100%; max-width: 700px; padding: 48px; max-height: calc(100vh - 100px); overflow: auto; }
#diagram-container .department-col::-webkit-scrollbar,
#diagram-container .goal-col::-webkit-scrollbar { display: none; }
.process-section .main-process-block .sub-process-block .sub-process-title-bar:before { content: ''; position: absolute; top: -20px; left: -24px; width: 2px; height: 100%; background-color: #D2D5DA; }

#progressModal .overlay > div { background-image: url(../images/bg-dot-matrix.png); background-size: contain; background-repeat: repeat; }
.process-section .main-process-block.toggle-wrapper.collapsed .main-process-box:before { display: none; }
.process-section .sub-process-objective .truncate { -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 3.6em; display: -webkit-box; white-space: unset; }

/* .node-box { opacity: 0; }
.connector-arrow:not(.visible) { opacity: 0; } */

:root {
    --color-dept-procurement-title: #FB923C;
    --color-dept-procurement-body: #FFF7ED;
    --color-dept-marketing-title: #53D1BE;
    --color-dept-marketing-body: #F3FDFA;
    --color-dept-sales-title: #60A5FA;
    --color-dept-sales-body: #EFF6FF;
    --color-dept-operations-title: #C084FC;
    --color-dept-operations-body: #FAF5FF;
    --color-line-procurement: #FB923C;
    --color-line-marketing: #53D1BE;
    --color-line-sales: #60A5FA;
    --color-line-operations: #C084FC;
    --color-line-default-gray: #d1d5db;

    /* New department colors */
    --color-dept-it-title: #2196F3;
    --color-dept-it-body: #E3F2FD;
    --color-dept-hr-title: #9C27B0;
    --color-dept-hr-body: #F3E5F5;
    --color-dept-finance-title: #FFB300;
    --color-dept-finance-body: #FFF8E1;
    --color-dept-admin-title: #607D8B;
    --color-dept-admin-body: #ECEFF1;

    /* Line colors */
    --color-line-it: #2196F3;
    --color-line-hr: #9C27B0;
    --color-line-finance: #FFB300;
    --color-line-admin: #607D8B;

    --color-dept-tag-prc-bg: #FFEDD5;
    --color-dept-tag-prc-border: #FDBA74;
    --color-dept-tag-prc-text: #C2410C;
    --color-dept-tag-lon-bg: #FEF3C7;
    --color-dept-tag-lon-border: #FDE047;
    --color-dept-tag-lon-text: #A16207;
    --color-dept-tag-sls-bg: #EFF6FF;
    --color-dept-tag-sls-border: #93C5FD;
    --color-dept-tag-sls-text: #1E40AF;
    --color-dept-tag-opr-bg: #FAF5FF;
    --color-dept-tag-opr-border: #E9D5FF;
    --color-dept-tag-opr-text: #7E22CE;
    --color-dept-tag-mrk-bg: #F3FDFA;
    --color-dept-tag-mrk-border: #A7F3D0;
    --color-dept-tag-mrk-text: #047857;
    --color-dept-tag-lgn-bg: #FEF3C7;
    --color-dept-tag-lgn-border: #FDE047;
    --color-dept-tag-lgn-text: #A16207;

    /* New department tag colors */
    --color-dept-tag-it-bg: #E3F2FD;
    --color-dept-tag-it-border: #90CAF9;
    --color-dept-tag-it-text: #1565C0;

    --color-dept-tag-hr-bg: #F3E5F5;
    --color-dept-tag-hr-border: #CE93D8;
    --color-dept-tag-hr-text: #6A1B9A;

    --color-dept-tag-fin-bg: #FFF8E1;
    --color-dept-tag-fin-border: #FFE082;
    --color-dept-tag-fin-text: #F57F17;

    --color-dept-tag-adm-bg: #ECEFF1;
    --color-dept-tag-adm-border: #B0BEC5;
    --color-dept-tag-adm-text: #37474F;

}


/* Media Queries */
@media screen and (max-width: 1500px) {
    #diagram-container .department-col,
    #diagram-container .goal-col { max-width: 600px; }
    .department-box .collapsible-content p,
    .process-tag-placeholder { font-size: 14px; }
    .department-box .collapsible-content .position-col { width: 40%; }
    .department-box .collapsible-content .process-col,
    .department-box .collapsible-content .connected-goal-col { width: 30%; }
}

@media screen and (max-width: 1300px) {
    #diagram-container .department-col,
    #diagram-container .goal-col { padding: 48px 28px; max-width: 520px; }
}

@media screen and (max-width: 1150px) {
    #diagram-container .department-col,
    #diagram-container .goal-col { max-width: 450px; }
    .department-box .collapsible-content .position-col { width: 100%; }
    .department-box .collapsible-content .process-col,
    .department-box .collapsible-content .connected-goal-col { width: 100%; margin-top: 15px; }
    .department-box .collapsible-content p, .process-tag-placeholder { display: inline-block; margin-right: 10px; }
    .goal-box .collapsible-content h6,
    .goal-box .collapsible-content p,
    .main-process-meta,
    .sub-process-objective { font-size: 14px; }
    .department-box .node-title-bg,
    .goal-box .node-title-bg h3,
    .main-process-title-bar h5,
    .sub-process-title-bar h5 { font-size: 16px; }
    .goal-box .node-title-bg h3::before { width: 24px; height: 24px; line-height: 24px; font-size: 14px; }
}