/*!
 * Tobalt Org Structure — frontend v4 (classic top-down org chart)
 * Author: Tobalt — https://tobalt.lt
 */

.tbt-org {
    --tbt-org-primary:       #509657;
    --tbt-org-primary-soft:  #e9f3ea;
    --tbt-org-primary-deep:  #3f7845;
    --tbt-org-bg:            #ffffff;
    --tbt-org-text:          #1a202c;
    --tbt-org-text-muted:    #4a5568;
    --tbt-org-line:          #c5cdd2;
    --tbt-org-radius:        10px;
    --tbt-org-gap-v:         22px;
    --tbt-org-gap-h:         14px;
    --tbt-org-shadow:        0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --tbt-org-shadow-hover:  0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.06);

    font-family: inherit;
    color: var(--tbt-org-text);
    box-sizing: border-box;
    padding: 16px 0;
    container-type: inline-size;
    container-name: tbtorg;
    max-width: 100%;
}

.tbt-org *,
.tbt-org *::before,
.tbt-org *::after {
    box-sizing: border-box;
}

/* ======================= TOOLBAR (sticky) ======================= */
.tbt-org__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--tbt-org-line);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 3;
}

.tbt-org__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.tbt-org__title-spacer { flex: 1; }

.tbt-org__actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}

.tbt-org__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--tbt-org-text);
    background: var(--tbt-org-bg);
    border: 1px solid var(--tbt-org-line);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    line-height: 1;
}
.tbt-org__btn:hover,
.tbt-org__btn:focus-visible {
    background: var(--tbt-org-primary);
    border-color: var(--tbt-org-primary);
    color: #fff;
    outline: 0;
    transform: translateY(-1px);
}

@container tbtorg (max-width: 640px) {
    .tbt-org__btn-label { display: none; }
    .tbt-org__btn { padding: 7px 9px; font-size: 0.95rem; }
    .tbt-org__title { font-size: 1rem; }
}

/* ======================= CANVAS (scale to fit) ======================= */
.tbt-org__canvas {
    overflow: hidden;
    max-width: 100%;
    padding: 12px 4px 20px;
    position: relative;
}

/* Fit wrapper — JS wraps each root's content in this so we can transform
   without scaling the node's own layout box. Absolute-positioned so
   the node (full canvas width) is a frame and the wrapper centers inside. */
.tbt-org__fit-inner {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 0;
    transform-origin: top center;
    will-change: transform;
}

/* ======================= CLASSIC TOP-DOWN TREE =======================
   Like the original JPEG: root at top, L1 children fan out HORIZONTALLY,
   but L2+ descendants STACK VERTICALLY beneath each L1 parent. */
.tbt-org__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* default: vertical (for L2+) */
    align-items: flex-start;
    gap: calc(var(--tbt-org-gap-v) / 2);
    min-width: min-content;
}

/* Level 1 row: horizontal fan directly under the root node
   (root node has a .tbt-org__fit-inner wrapper, so we dig through it) */
.tbt-org__node[data-level="0"] > .tbt-org__fit-inner > .tbt-org__list,
.tbt-org__node[data-level="0"] > .tbt-org__list {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: var(--tbt-org-gap-h);
}

/* Top-level: each root tree stacks vertically so it gets the full canvas width. */
.tbt-org__canvas > .tbt-org__list {
    display: block;
    padding: 0 12px;
}

/* Each root is a block container full canvas width; inner is absolutely centered & scaled. */
.tbt-org__canvas > .tbt-org__list > .tbt-org__node {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    margin-bottom: calc(var(--tbt-org-gap-v) * 2);
    overflow: visible;
}

/* Separator line between stacked charts */
.tbt-org__canvas > .tbt-org__list > .tbt-org__node + .tbt-org__node {
    padding-top: calc(var(--tbt-org-gap-v) * 1.5);
    border-top: 1px dashed var(--tbt-org-line);
}

.tbt-org__node {
    position: relative;
    flex: 0 0 auto;
    text-align: center;
    padding-top: var(--tbt-org-gap-v);
}

/* Root nodes: no top spacing / connectors */
.tbt-org__canvas > .tbt-org__list > .tbt-org__node {
    padding-top: 0;
}
.tbt-org__canvas > .tbt-org__list > .tbt-org__node::before,
.tbt-org__canvas > .tbt-org__list > .tbt-org__node::after {
    display: none;
}

/* Vertical stub from this node to its parent's horizontal bar */
.tbt-org__node::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: calc(var(--tbt-org-gap-v) / 2);
    background: var(--tbt-org-line);
    transform: translateX(-1px);
}

/* Horizontal sibling bar (spans all siblings at this level) */
.tbt-org__node::after {
    content: "";
    position: absolute;
    top: calc(var(--tbt-org-gap-v) / 2);
    left: 0;
    right: 0;
    height: 2px;
    background: var(--tbt-org-line);
}

/* Trim horizontal bar at first and last sibling */
.tbt-org__list > .tbt-org__node:first-child::after {
    left: 50%;
}
.tbt-org__list > .tbt-org__node:last-child::after {
    right: 50%;
}
/* Only child: no horizontal bar, only vertical stub */
.tbt-org__list > .tbt-org__node:only-child::after {
    display: none;
}

/* Parent node: vertical line from its label down to children's bar (classic only).
   Disabled when children render as a vertical indented list. */
.tbt-org__node.has-children > .tbt-org__row::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: calc(var(--tbt-org-gap-v) / 2);
    background: var(--tbt-org-line);
    transform: translateX(-1px);
}

/* The nested list that follows (classic horizontal children) */
.tbt-org__node[data-level="0"] > .tbt-org__fit-inner > .tbt-org__list,
.tbt-org__node[data-level="0"] > .tbt-org__list {
    margin-top: var(--tbt-org-gap-v);
}

/* =======================================================
   L2+ VERTICAL INDENTED STYLE (children of L1+ parents)
   Matches the JPEG: deeper levels stack vertically under
   their horizontally-laid-out L1 parent.
   ======================================================= */
.tbt-org__node[data-level="1"] > .tbt-org__list,
.tbt-org__node[data-level="2"] > .tbt-org__list,
.tbt-org__node[data-level="3"] > .tbt-org__list,
.tbt-org__node[data-level="4"] > .tbt-org__list {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 16px;
    margin-left: 14px;
    margin-top: calc(var(--tbt-org-gap-v) / 2);
    border-left: 2px dashed var(--tbt-org-line);
    gap: 6px;
    min-width: 0;
}

/* Hide the parent-to-bar stub on L1+ parents (indented list handles the visual) */
.tbt-org__node[data-level="1"].has-children > .tbt-org__row::after,
.tbt-org__node[data-level="2"].has-children > .tbt-org__row::after,
.tbt-org__node[data-level="3"].has-children > .tbt-org__row::after,
.tbt-org__node[data-level="4"].has-children > .tbt-org__row::after {
    display: none;
}

/* Kill the classic horizontal bar (::after) on nodes inside vertical lists */
.tbt-org__node[data-level="1"] > .tbt-org__list > .tbt-org__node::after,
.tbt-org__node[data-level="2"] > .tbt-org__list > .tbt-org__node::after,
.tbt-org__node[data-level="3"] > .tbt-org__list > .tbt-org__node::after,
.tbt-org__node[data-level="4"] > .tbt-org__list > .tbt-org__node::after {
    display: none;
}

/* Remove padding-top (no vertical stub to parent-bar in vertical list) */
.tbt-org__node[data-level="1"] > .tbt-org__list > .tbt-org__node,
.tbt-org__node[data-level="2"] > .tbt-org__list > .tbt-org__node,
.tbt-org__node[data-level="3"] > .tbt-org__list > .tbt-org__node,
.tbt-org__node[data-level="4"] > .tbt-org__list > .tbt-org__node {
    padding-top: 0;
}

/* Replace ::before with a short horizontal tick from the dashed line to each child */
.tbt-org__node[data-level="1"] > .tbt-org__list > .tbt-org__node::before,
.tbt-org__node[data-level="2"] > .tbt-org__list > .tbt-org__node::before,
.tbt-org__node[data-level="3"] > .tbt-org__list > .tbt-org__node::before,
.tbt-org__node[data-level="4"] > .tbt-org__list > .tbt-org__node::before {
    content: "";
    position: absolute;
    top: 16px;
    left: -16px;
    width: 14px;
    height: 2px;
    background: var(--tbt-org-line);
    transform: none;
}

/* Collapsed children: removed from layout so parent width shrinks too. */
.tbt-org__node.is-collapsed > .tbt-org__list {
    display: none;
}
.tbt-org__node.is-collapsed > .tbt-org__row::after {
    display: none;
}

/* ======================= ROW (toggle + label) ======================= */
.tbt-org__row {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
}

.tbt-org__toggle {
    flex: 0 0 auto;
    width: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tbt-org-primary-soft);
    border: 1px solid var(--tbt-org-line);
    border-right: 0;
    border-radius: var(--tbt-org-radius) 0 0 var(--tbt-org-radius);
    cursor: pointer;
    color: var(--tbt-org-primary-deep);
    font-size: 11px;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.tbt-org__toggle:hover,
.tbt-org__toggle:focus-visible {
    background: var(--tbt-org-primary);
    color: #fff;
    outline: 0;
}
.tbt-org__toggle::before {
    content: "▾";
    transition: transform 0.2s ease;
    line-height: 1;
}
.tbt-org__node.is-collapsed > .tbt-org__row > .tbt-org__toggle::before {
    transform: rotate(-90deg);
}

.tbt-org__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    background: var(--tbt-org-bg);
    color: var(--tbt-org-text);
    border: 1px solid var(--tbt-org-line);
    border-left: 4px solid var(--tbt-org-primary);
    border-radius: var(--tbt-org-radius);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.3;
    text-align: center;
    box-shadow: var(--tbt-org-shadow);
    transition: box-shadow 0.18s ease;
    min-width: 120px;
    max-width: 180px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.tbt-org__node.has-children > .tbt-org__row > .tbt-org__label {
    border-radius: 0 var(--tbt-org-radius) var(--tbt-org-radius) 0;
    border-left: 0;
}

.tbt-org__node:hover > .tbt-org__row > .tbt-org__label {
    box-shadow: var(--tbt-org-shadow-hover);
}

/* Root labels bolder */
.tbt-org__canvas > .tbt-org__list > .tbt-org__node > .tbt-org__row > .tbt-org__label {
    font-size: 0.9375rem;
    font-weight: 700;
    padding: 10px 16px;
    border-left-width: 5px;
    min-width: 160px;
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.05), 0 4px 8px rgba(16, 24, 40, 0.06);
}
.tbt-org__canvas > .tbt-org__list > .tbt-org__node.has-children > .tbt-org__row > .tbt-org__label {
    border-left: 0;
}
.tbt-org__canvas > .tbt-org__list > .tbt-org__node > .tbt-org__row > .tbt-org__toggle {
    width: 26px;
    border-left: 5px solid var(--tbt-org-primary);
}

/* Deep levels: smaller, muted */
.tbt-org__list .tbt-org__list .tbt-org__list .tbt-org__label {
    font-size: 0.8125rem;
    color: var(--tbt-org-text-muted);
    padding: 6px 12px;
    border-left-color: var(--tbt-org-primary-soft);
}

/* ======================= MOBILE COMPACT (same layout, smaller) ======================= */
@container tbtorg (max-width: 600px) {
    .tbt-org { padding: 10px 0; --tbt-org-gap-v: 16px; --tbt-org-gap-h: 8px; }
    .tbt-org__label {
        font-size: 0.75rem;
        padding: 6px 10px;
        min-width: 90px;
        max-width: 140px;
    }
    .tbt-org__canvas > .tbt-org__list > .tbt-org__node > .tbt-org__row > .tbt-org__label {
        font-size: 0.8125rem;
        padding: 7px 12px;
        min-width: 120px;
    }
    .tbt-org__list .tbt-org__list .tbt-org__list .tbt-org__label {
        font-size: 0.6875rem;
        padding: 5px 9px;
        min-width: 80px;
    }
    .tbt-org__toggle { width: 18px; font-size: 10px; }
    .tbt-org__canvas > .tbt-org__list > .tbt-org__node > .tbt-org__row > .tbt-org__toggle { width: 22px; }
    .tbt-org__canvas > .tbt-org__list { gap: var(--tbt-org-gap-h); }
}

/* ======================= FULLSCREEN ======================= */
.tbt-org:fullscreen,
.tbt-org--fullscreen {
    background: #fff;
    padding: 20px !important;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.tbt-org:fullscreen .tbt-org__canvas,
.tbt-org--fullscreen .tbt-org__canvas {
    height: calc(100vh - 80px);
}

/* ======================= PRINT (A4 landscape) ======================= */
@media print {
    body * { visibility: hidden !important; }
    .tbt-org, .tbt-org * { visibility: visible !important; }
    .tbt-org {
        position: absolute !important;
        left: 0; top: 0; right: 0;
        padding: 0 !important;
        margin: 0 !important;
    }
    .tbt-org__toolbar { display: none !important; }

    @page { size: A4 landscape; margin: 8mm; }

    .tbt-org__canvas { overflow: visible !important; padding: 0 !important; height: auto !important; }
    .tbt-org__canvas > .tbt-org__list { transform: none !important; }

    .tbt-org { --tbt-org-gap-v: 14px; --tbt-org-gap-h: 6px; }

    .tbt-org__label {
        box-shadow: none !important;
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #000 !important;
        border-left-width: 3px !important;
        font-size: 8pt !important;
        padding: 3px 6px !important;
        min-width: 70px !important;
        max-width: 120px !important;
    }
    .tbt-org__canvas > .tbt-org__list > .tbt-org__node > .tbt-org__row > .tbt-org__label {
        font-size: 9pt !important;
        font-weight: 700 !important;
        padding: 4px 8px !important;
        min-width: 90px !important;
    }
    .tbt-org__toggle { display: none !important; }
    .tbt-org__node.has-children > .tbt-org__row > .tbt-org__label {
        border-left: 3px solid #000 !important;
        border-radius: 5px !important;
    }
    .tbt-org__node.is-collapsed > .tbt-org__list {
        max-height: none !important;
        opacity: 1 !important;
        margin-top: var(--tbt-org-gap-v) !important;
    }
    .tbt-org__node.is-collapsed > .tbt-org__row::after {
        display: block !important;
    }
    .tbt-org__node::before,
    .tbt-org__node::after,
    .tbt-org__node.has-children > .tbt-org__row::after {
        background: #000 !important;
    }
    .tbt-org__node { page-break-inside: avoid; break-inside: avoid; }
    .tbt-org__node:hover > .tbt-org__row > .tbt-org__label { transform: none !important; }
}

.tbt-org-empty {
    padding: 16px;
    color: #666;
    font-style: italic;
    background: #f8fafc;
    border-radius: 8px;
    text-align: center;
}