/* FILE: CSS/org_chart.css */
/* Dynamic org charts for about_sections.php (rendered by includes/org_chart.php) */

/* ---------- 1. Base + tokens ---------- */
.oc {
    --oc-line: #1f2937;          /* connector lines */
    --oc-lw: 3px;                /* connector line thickness */
    --oc-gap: 26px;              /* vertical space taken by connectors between rows */
    --oc-photo: 76px;            /* photo circle size */
    --oc-ph-off: 8px;            /* photo pokes this far above the name bar */
    --oc-card-w: 330px;
    --oc-indent: 72px;           /* how far vertical-layout children hang to the right */
    --oc-from: #22508a;          /* default (blue) theme */
    --oc-to: #5a9ad8;
    --oc-ring: #3f6fa3;
    --oc-title: #0b4a8b;

    font-family: 'Nunito', Arial, sans-serif;
    padding: 20px 12px 40px;
    overflow-x: auto;            /* fallback only -- the fit script normally shrinks wide charts to fit */
    position: relative;
    isolation: isolate;          /* keeps the background logo behind the chart only */
}

/* Faded NIR seal behind the chart (like the Affinity versions) */
.oc::before {
    content: '';
    position: absolute;
    inset: 6% 4%;
    z-index: -1;
    background: url('../Images/DepEd%20NIR%20Logo.png') center / contain no-repeat;  /* %20 = the spaces in the file name */
    opacity: 0.14;
    filter: blur(5px);
    pointer-events: none;
}
.darkmode .oc::before,
.dark-mode .oc::before { opacity: 0.06; }

/* Optional link button (e.g. QAD website), centered under the chart title */
.oc-link {
    position: relative;
    z-index: 2;
    display: table;                   /* centered under the title */
    margin: -14px auto 22px;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--oc-from), var(--oc-to));
    color: #fff !important;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.oc-link:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); }


/* Dashed frame on the public page (same look as the old image boxes) */
.tab-content > .oc {
    margin: 20px 0;
    border: 2px dashed #c3c7cd;
    border-radius: 12px;
    background-color: #f6f7f9;

    /* Same shape as the NIR overview image box. about_sections.php measures that box and sets
       --oc-frame-ratio; 4 / 3 (the Affinity canvas) is the fallback. Taller charts make the frame grow. */
    box-sizing: border-box;
    aspect-ratio: var(--oc-frame-ratio, 4 / 3);
    overflow: visible;
    display: flex;
    flex-direction: column;
}
.tab-content > .oc > .oc-root { margin-top: auto; margin-bottom: auto; }  /* smaller charts sit in the middle */
.darkmode .tab-content > .oc {
    border-color: rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.03);
}
.darkmode .oc,
.dark-mode .oc { --oc-line: #cbd5e1; }   /* .darkmode = public site, .dark-mode = operator preview */

/* ---------- 2. Themes (match the NIR overview chart colors) ---------- */
.oc-theme-blue   { --oc-from: #22508a; --oc-to: #5a9ad8; --oc-ring: #3f6fa3; --oc-title: #0b4a8b; }
.oc-theme-red    { --oc-from: #a3241b; --oc-to: #ef4a37; --oc-ring: #e2412f; --oc-title: #b3261e; }
.oc-theme-orange { --oc-from: #c2561c; --oc-to: #f7a05a; --oc-ring: #f2914a; --oc-title: #f26b12; }
.oc-theme-indigo { --oc-from: #2f3fa8; --oc-to: #4f6cf0; --oc-ring: #4a5fd6; --oc-title: #2f3fa8; }
.oc-theme-purple { --oc-from: #4b2a9e; --oc-to: #7c4fe6; --oc-ring: #6a42d0; --oc-title: #4b2a9e; }
.oc-theme-yellow { --oc-from: #b68a12; --oc-to: #f2c94c; --oc-ring: #d9a91f; --oc-title: #a77c0a; }
.oc-theme-green  { --oc-from: #1f7a3a; --oc-to: #4cc46a; --oc-ring: #36a956; --oc-title: #1f7a3a; }
.oc-theme-gray   { --oc-from: #555b63; --oc-to: #9aa0a6; --oc-ring: #7a8088; --oc-title: #4b5058; }
.oc-theme-pink   { --oc-from: #c2266f; --oc-to: #f06bb0; --oc-ring: #e2479a; --oc-title: #c2266f; }

.oc-title {
    text-align: center;
    color: var(--oc-title);
    font-weight: 700;
    font-size: clamp(22px, 3vw, 40px);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 30px;
}
.darkmode .oc-title,
.dark-mode .oc-title { color: var(--oc-to); }

.oc-list { margin: 0; padding: 0; }
/* Stronger reset against general page ul styles -- only the sides the connectors don't use */
.oc .oc-list { list-style: none; margin-top: 0; margin-bottom: 0; padding-left: 0; padding-right: 0; }
.oc-root { display: flex; justify-content: center; min-width: max-content; }

/* ---------- 3. Boxes ---------- */
.oc-branch { display: flex; flex-direction: column; align-items: center; }

.oc-card {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    width: var(--oc-card-w);
    text-align: left;
}
.oc-photo {
    position: relative;
    z-index: 2;
    flex: 0 0 var(--oc-photo);
    width: var(--oc-photo);
    height: var(--oc-photo);
    margin-top: calc(var(--oc-ph-off) * -1);
    border-radius: 50%;
    border: 4px solid var(--oc-ring);
    background: #fff;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
.oc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; font-size: 0; color: transparent; } /* no alt text spill if a photo is missing */

.oc-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(var(--oc-photo) - var(--oc-ph-off) * 2);
    margin-left: calc(var(--oc-photo) * -0.3);
    padding: 8px 12px 8px calc(var(--oc-photo) * 0.3 + 10px);
    box-sizing: border-box;
    background: linear-gradient(180deg, var(--oc-from), var(--oc-to));
    border-radius: 8px;
    color: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}
.oc-name { font-weight: 800; font-size: 14px; line-height: 1.25; text-transform: uppercase; white-space: nowrap; } /* one line; the fit script widens the boxes */
.oc-pos  { font-style: italic; font-size: 14px; line-height: 1.25; color: #fff27a; white-space: nowrap; }
.oc-prog { font-style: italic; font-size: 12px; line-height: 1.25; color: #fff27a; opacity: 0.95; white-space: nowrap; }
.oc-tag {
    align-self: flex-start;
    margin-bottom: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #fde68a;
    color: #3f3f46;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* The top box (Regional Director) stays ORD blue on every division chart, like the Affinity versions */
.oc-root > li > .oc-branch > .oc-card { --oc-from: #22508a; --oc-to: #5a9ad8; --oc-ring: #3f6fa3; }

/* Gray unit header (LEGAL UNIT, ICT UNIT ...) */
.oc-unit {
    position: relative;
    z-index: 1;
    width: var(--oc-card-w);
    padding: 14px 16px;
    box-sizing: border-box;
    border-radius: 14px;
    background: linear-gradient(180deg, #5f6368, #a5a8ad);
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}

/* ---------- 4. Horizontal layout (children side by side) ---------- */
.oc-h { display: flex; justify-content: center; position: relative; padding-top: var(--oc-gap); }
.oc-h::before {                       /* stub down from the parent */
    content: '';
    position: absolute;
    top: -24px;                       /* reaches up behind the parent box so there's never a gap */
    left: calc(50% - var(--oc-lw) / 2);
    height: calc(var(--oc-gap) + 24px);
    border-left: var(--oc-lw) solid var(--oc-line);
}
.oc-h > li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--oc-gap) 10px 0;
}
.oc-h > li::before,
.oc-h > li::after {                   /* horizontal bar + drop into each child */
    content: '';
    position: absolute;
    top: 0;
    left: -2px;                       /* left half: overlaps the neighbor by 2px so joins never show a gap */
    right: 50%;
    height: var(--oc-gap);
    border-top: var(--oc-lw) solid var(--oc-line);
}
.oc-h > li::after {                   /* right half + the drop into this child */
    left: calc(50% - var(--oc-lw) / 2);
    right: -2px;
    border-left: var(--oc-lw) solid var(--oc-line);
}
.oc-h > li:first-child::before,
.oc-h > li:last-child::after { border: 0 none; }
.oc-h > li:last-child::before { right: calc(50% - var(--oc-lw) / 2); border-right: var(--oc-lw) solid var(--oc-line); }
.oc-h > li:only-child::before { border: 0 none; }                    /* single child: straight drop, */
.oc-h > li:only-child::after  { border: 0 none; border-left: var(--oc-lw) solid var(--oc-line); } /* lined up with the stub */

/* Staff row: main line keeps running down through it */
.oc-staff.oc-spine::after {
    content: '';
    position: absolute;
    left: calc(50% - var(--oc-lw) / 2);
    top: var(--oc-gap);
    bottom: 0;
    border-left: var(--oc-lw) solid var(--oc-line);
    z-index: 0;
}

/* ---------- 5. Vertical layout (children stacked on a left rail) ---------- */
/* Shift the box right so it stays centered over its own connector */
.oc-h > li.oc-lay-v.oc-has-kids > .oc-branch { padding-left: var(--oc-indent); }
.oc-lay-v > .oc-branch,
.oc-v > li > .oc-branch { align-items: flex-start; }   /* stacked boxes line up on the left */

/* Rail from under the parent's photo */
.oc-lay-v.oc-has-kids > .oc-branch > .oc-card::after,
.oc-lay-v.oc-has-kids > .oc-branch > .oc-unit::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: calc(var(--oc-photo) / 2 - var(--oc-lw) / 2);
    top: calc(var(--oc-photo) / 2 - var(--oc-ph-off));
    bottom: 0;
    border-left: var(--oc-lw) solid var(--oc-line);
}
/* Units have no photo -- their list starts right at the box's bottom edge, so no rail is needed (it would draw over the gray box) */
.oc .oc-branch > .oc-unit::after { display: none !important; }
.oc-v { position: relative; margin-left: calc(var(--oc-photo) / 2 - var(--oc-lw) / 2); }
.oc-v > li { position: relative; padding: 14px 0 0 calc(var(--oc-indent) - var(--oc-photo) / 2); }
.oc-v > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-left: var(--oc-lw) solid var(--oc-line);
}
.oc-v > li:last-child::before { bottom: auto; height: calc(14px + var(--oc-photo) / 2 - var(--oc-ph-off)); }
.oc-v > li::after {
    content: '';
    position: absolute;
    left: 0;
    top: calc(14px + var(--oc-photo) / 2 - var(--oc-ph-off));
    width: calc(var(--oc-indent) - var(--oc-photo) / 2);
    border-top: var(--oc-lw) solid var(--oc-line);
}

/* ---------- 5b. Two-column grid (children on both sides of a center spine) ---------- */
/* Desktop only -- phones fall back to the rail list in section 6 */
@media (min-width: 769px) {
    .oc {
        --oc-gcol: 70px;             /* space between the two columns (spine runs down the middle) */
        --oc-grow: 22px;             /* space between rows */
        --oc-gelbow: calc(var(--oc-photo) / 2 - var(--oc-ph-off));  /* y of a card's photo center */
    }
    .oc-g {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;   /* equal columns keep the spine dead center under the parent */
        width: max-content;
        column-gap: var(--oc-gcol);
        row-gap: var(--oc-grow);
        padding-top: var(--oc-gap);
    }
    .oc-g::before {                       /* stub down from the parent */
        content: '';
        position: absolute;
        top: -24px;
        left: calc(50% - var(--oc-lw) / 2);
        height: calc(var(--oc-gap) + 24px);
        border-left: var(--oc-lw) solid var(--oc-line);
    }
    .oc-g > li { position: relative; }
    .oc-g > li > .oc-branch { align-items: flex-start; }

    /* Left column: elbow from the card's right edge to the spine, and the spine itself */
    .oc-g > li:nth-child(odd)::after {
        content: '';
        position: absolute;
        top: var(--oc-gelbow);
        left: var(--oc-card-w);
        right: calc(var(--oc-gcol) / -2);
        border-top: var(--oc-lw) solid var(--oc-line);
    }
    .oc-g > li:nth-child(odd)::before {
        content: '';
        position: absolute;
        left: calc(100% + var(--oc-gcol) / 2 - var(--oc-lw) / 2);
        top: calc(var(--oc-grow) * -1);
        bottom: 0;
        border-left: var(--oc-lw) solid var(--oc-line);
    }
    .oc-g > li:first-child::before { top: 0; }
    .oc-g > li:nth-child(odd):nth-last-child(-n+2)::before {          /* last row: spine stops at the elbow */
        bottom: auto;
        height: calc(var(--oc-grow) + var(--oc-gelbow));
    }
    .oc-g > li:first-child:nth-last-child(-n+2)::before { height: var(--oc-gelbow); }

    /* Right column: elbow from the spine to the card's left edge */
    .oc-g > li:nth-child(even)::after {
        content: '';
        position: absolute;
        top: var(--oc-gelbow);
        left: calc(var(--oc-gcol) / -2);
        width: calc(var(--oc-gcol) / 2);
        border-top: var(--oc-lw) solid var(--oc-line);
    }
}

/* ---------- 6. Phones: everything becomes one indented list ---------- */
@media (max-width: 768px) {
    .oc {
        --oc-photo: 54px;
        --oc-indent: 40px;
        --oc-card-w: 100%;
        overflow-x: visible;
        padding: 12px 4px 30px;
    }
    .oc-root { display: block; min-width: 0; }
    .oc-branch,
    .oc-lay-v > .oc-branch { align-items: stretch; }
    .oc-h > li.oc-lay-v.oc-has-kids > .oc-branch { padding-left: 0; }
    .oc-name { font-size: 13px; white-space: normal; }
    .oc-pos  { font-size: 13px; white-space: normal; }
    .oc-prog { white-space: normal; }

    /* Horizontal lists turn into rails too */
    .oc-h { display: block; padding-top: 0; margin-left: calc(var(--oc-photo) / 2 - var(--oc-lw) / 2); }
    .oc-h::before { display: none; }
    .oc-h > li {
        display: block;
        padding: 14px 0 0 calc(var(--oc-indent) - var(--oc-photo) / 2);
    }
    .oc-h > li::before,
    .oc-h > li:first-child::before,
    .oc-h > li:last-child::before {
        right: auto;
        left: 0;
        top: 0;
        bottom: 0;
        width: 0;
        height: auto;
        border: 0 none;
        border-left: var(--oc-lw) solid var(--oc-line);
    }
    .oc-h > li:last-child::before { bottom: auto; height: calc(14px + var(--oc-photo) / 2 - var(--oc-ph-off)); }
    .oc-staff.oc-spine > li:last-child::before { bottom: 0; height: auto; } /* rail continues to the main list */
    .oc-h > li::after,
    .oc-h > li:first-child::after,
    .oc-h > li:last-child::after {
        left: 0;
        right: auto;
        top: calc(14px + var(--oc-photo) / 2 - var(--oc-ph-off));
        width: calc(var(--oc-indent) - var(--oc-photo) / 2);
        height: 0;
        border: 0 none;
        border-top: var(--oc-lw) solid var(--oc-line);
    }
    .oc-staff.oc-spine::after { display: none; }

    /* Two-column grid becomes a plain rail list (same as section 5) */
    .oc-g { position: relative; margin-left: calc(var(--oc-photo) / 2 - var(--oc-lw) / 2); }
    .oc-g > li { position: relative; padding: 14px 0 0 calc(var(--oc-indent) - var(--oc-photo) / 2); }
    .oc-g > li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        border-left: var(--oc-lw) solid var(--oc-line);
    }
    .oc-g > li:last-child::before { bottom: auto; height: calc(14px + var(--oc-photo) / 2 - var(--oc-ph-off)); }
    .oc-g > li::after {
        content: '';
        position: absolute;
        left: 0;
        top: calc(14px + var(--oc-photo) / 2 - var(--oc-ph-off));
        width: calc(var(--oc-indent) - var(--oc-photo) / 2);
        border-top: var(--oc-lw) solid var(--oc-line);
    }

    /* Every parent gets a rail under its photo */
    .oc-has-kids > .oc-branch > .oc-card::after,
    .oc-has-kids > .oc-branch > .oc-unit::after {
        content: '';
        position: absolute;
        z-index: -1;
        left: calc(var(--oc-photo) / 2 - var(--oc-lw) / 2);
        top: calc(var(--oc-photo) / 2 - var(--oc-ph-off));
        bottom: 0;
        border-left: var(--oc-lw) solid var(--oc-line);
    }
    .oc-unit { justify-content: flex-start; text-align: left; font-size: 14px; padding: 12px 14px; min-height: 0; }
}