/* Copyright (c) Attila Gluck <attila.gluck@gmail.com> */
:root {
    --node-width: 160px;
}

body { font-family: Arial; background:#f5f5f5; }

.topbar {
    background:#222;
    color:#fff;
    padding:8px 12px;
    font-size:13px;
}

.topbar-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.topbar-title {
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.topbar-title.is-editable {
    cursor:text;
}

.topbar-title-input {
    width:min(320px, 50vw);
    padding:4px 8px;
    border:1px solid #bbb;
    border-radius:6px;
    font:inherit;
}

.topbar-actions {
    display:flex;
    align-items:center;
    gap:10px;
    position:relative;
    margin-left:auto;
}

.node-width-control {
    display:flex;
    align-items:center;
    gap:8px;
    color:#ddd;
    white-space:nowrap;
}

.node-width-control span,
.node-width-control output {
    font-size:12px;
}

.node-width-control input {
    width:120px;
}

.node-width-control.is-disabled {
    opacity:0.5;
}

.matrix-view-control {
    display:flex;
    align-items:center;
    gap:6px;
    color:#ddd;
    white-space:nowrap;
}

.matrix-view-control input {
    margin:0;
}

.matrix-view-control.is-disabled {
    opacity:0.5;
}

.actions-toggle {
    border:1px solid #444;
    background:#fff;
    color:#222;
    border-radius:6px;
    padding:6px 10px;
    cursor:pointer;
    font:inherit;
}

.actions-menu {
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    min-width:160px;
    padding:6px;
    background:#fff;
    border:1px solid #ccc;
    border-radius:8px;
    box-shadow:0 10px 30px rgba(0, 0, 0, 0.16);
    z-index:20;
}

.actions-menu button {
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:9px 10px;
    border:0;
    border-radius:6px;
    background:transparent;
    color:#222;
    text-align:left;
    cursor:pointer;
    font:inherit;
}

.actions-menu button i {
    width:14px;
    text-align:center;
    flex:0 0 14px;
}

.actions-menu button span {
    flex:1 1 auto;
}

.actions-menu button:hover {
    background:#f1f1f1;
}

.actions-menu button:disabled {
    color:#999;
    cursor:not-allowed;
}

.actions-menu button:disabled:hover {
    background:transparent;
}

@media (max-width: 600px) {
    .topbar-inner {
        align-items:flex-start;
    }

    .topbar-title {
        max-width:calc(100vw - 120px);
    }
}

#list {
    max-width:360px;
    margin:30px auto;
    padding:12px;
    background:#fff;
    border:1px solid #ccc;
    border-radius:6px;
}

.login {
    max-width:360px;
    margin:30px auto;
    padding:12px;
    background:#fff;
    border:1px solid #ccc;
    border-radius:6px;
}

.login label {
    display:block;
    margin-bottom:6px;
}

.login input {
    box-sizing:border-box;
    width:100%;
    margin-bottom:10px;
    padding:8px;
}

.login button {
    padding:8px 12px;
    cursor:pointer;
}

.login-error {
    margin-top:10px;
    color:red;
}

#list:empty {
    display:none;
}

.readonly #list {
    display:none;
}

#list h2 {
    margin:0 0 10px;
    font-size:16px;
}

#list ul {
    margin:0;
    padding-left:18px;
}

#list li {
    margin:6px 0;
    position:relative;
}

#list .project-delete {
    position:static;
    display:inline-block;
    margin-right:6px;
}

#list .project-duplicate {
    position:relative;
    display:inline-block;
    width:14px;
    height:14px;
    margin:0 6px 0 0;
    padding:0;
    border:0;
    background:transparent;
    color:#555;
    cursor:pointer;
    vertical-align:middle;
}

.duplicate-symbol::before,
.duplicate-symbol::after {
    content:'';
    position:absolute;
    width:8px;
    height:8px;
    border:1px solid currentColor;
    background:#fff;
}

.duplicate-symbol::before {
    top:1px;
    left:1px;
}

.duplicate-symbol::after {
    top:4px;
    left:4px;
}

.tree { display:flex; justify-content:center; margin-top:0px;}
.tree ul { padding-top:20px; position:relative; display:flex; justify-content:center;}
.tree li { list-style:none; text-align:center; position:relative; padding:20px 10px 0;}

.tree li::before,
.tree li::after {
    content:'';
    position:absolute;
    top:0;
    right:50%;
    border-top:2px solid #ccc;
    width:50%;
    height:20px;
}

.tree li::after {
    right:auto;
    left:50%;
    border-left:2px solid #ccc;
}

.tree li:only-child::before {
    display:none;
}

.tree li:only-child::after {
    display:none;
}

.tree li:only-child > .node::before {
    content:'';
    position:absolute;
    top:-20px;
    left:50%;
    transform:translateX(-50%);
    border-left:2px solid #ccc;
    height:20px;
}

.tree li:first-child::before,
.tree li:last-child::after {
    border:0;
}

.tree li:last-child::before {
    border-right:2px solid #ccc;
}

.tree li:first-child::after {
    border-left:2px solid #ccc;
}

.node {
    display:inline-block;
    padding:24px 12px 12px 12px;
    background:#fff;
    border:1px solid #ccc;
    border-radius:6px;
    position:relative;
    width:var(--node-width);
    min-width:var(--node-width);
    max-width:var(--node-width);
    box-sizing:border-box;
}

.node textarea{
    width:100%;
    height: 3em;
}

.delete {
    position:absolute;
    top:2px;
    right:4px;
    padding:2px;
    border:0;
    background:transparent;
    color:#9a9a9a;
    cursor:pointer;
    font:inherit;
}
.delete i {
    font-size:12px;
    pointer-events:none;
}
.node-info {
    position:absolute;
    top:2px;
    right:22px;
    padding:2px;
    border:0;
    background:transparent;
    color:#9a9a9a;
    cursor:pointer;
    font:inherit;
}
.node-info i {
    font-size:12px;
    pointer-events:none;
}
.color-picker {
    position:absolute;
    top:4px;
    left:6px;
    width:14px;
    height:14px;
    color:#9a9a9a;
    cursor:pointer;
}
.color-picker i {
    display:block;
    width:14px;
    height:14px;
    line-height:14px;
    font-size:12px;
    text-align:center;
    pointer-events:none;
}
.color-picker input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.label { display:block; cursor:pointer; overflow-wrap:anywhere;}
.hidden { display:none !important;}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0;}
.subtitle { display:block; cursor:pointer; color:#666; font-size:12px; margin-top:4px; min-height:14px; overflow-wrap:anywhere;}
.subtitle:empty::before { content:'-----'; color:#aaa;}
.controls { font-size:12px; margin-top:5px;}
.btn { cursor:pointer; color:#007bff; margin:0 3px;}

.tree ul ul:has(li)::before {
    content:'';
    position:absolute;
    top:0;
    left:50%;
    border-left:2px solid #ccc;
    height:20px;
}

.tree.matrix-view ul[data-depth]:not([data-depth="0"]):not([data-depth="1"]) {
    display:block;
    padding-top:12px;
}

.tree.matrix-view ul[data-depth]:not([data-depth="0"]):not([data-depth="1"])::before,
.tree.matrix-view ul[data-depth]:not([data-depth="0"]):not([data-depth="1"]) > li::before,
.tree.matrix-view ul[data-depth]:not([data-depth="0"]):not([data-depth="1"]) > li::after,
.tree.matrix-view ul[data-depth]:not([data-depth="0"]):not([data-depth="1"]) > li:only-child > .node::before {
    display:none;
}

.tree.matrix-view ul[data-depth]:not([data-depth="0"]):not([data-depth="1"]) > li {
    display:block;
    padding:12px 0 0;
}

.readonly .btn,
.readonly .delete {
    display:none !important;
}

.readonly .label,
.readonly .subtitle {
    cursor:default;
}