/* ═══════════════════════════════════════════════════════════════════
   CSS Custom Properties (Design Tokens)
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Colors */
    --tb-primary-color: #1e5925;
    --tb-primary-hover: #2a7a35;
    --tb-primary-active: #16401c;
    --tb-primary-light: #e8f4e8;
    --tb-disabled-color: #888888;
    --tb-disabled-hover: #666666;
    --tb-border-color: #ccc;
    --tb-button-bg: #f0f0f0;
    --tb-button-hover: #e0e0e0;
    
    /* Spacing */
    --tb-spacing-xs: 4px;
    --tb-spacing-sm: 8px;
    --tb-spacing-md: 10px;
    --tb-spacing-lg: 15px;
    
    /* Sizes */
    --tb-icon-size: 18px;
    --tb-tree-icon-size: 16px;
    --tb-checkbox-size: 13px;
    --tb-border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════════
   Base Layout
   ═══════════════════════════════════════════════════════════════════ */

ul, #treelist {
    list-style-type: none;
}

#treelist ul {
    padding-left: var(--tb-spacing-lg);
}

#treebrowser {
    width: 100%;
    height: 100%;
    position: relative;
    font-size: 15px;
    color: black;
}

#treelist-wrapper {
    width: 100%;
    position: relative;
    background-color: white;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
#treelist-scroll-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

#treelist {
    margin: 0;
    padding: var(--tb-spacing-md);
}

#treelist li {
    cursor: pointer;
    user-select: none;
    padding-top: 1px;
    padding-bottom: 1px;
}
#treebrowser hr {
    margin: 2px 0;
}

/* Only apply flex to items under .trees (static trees) */
#treelist > li > .trees > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* User tree items (not folders) use flex layout like static trees */
#user-trees-list > li:not(.user-folder) {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

/* Nested user trees (inside folders) - same flex layout so checkboxes align right like static trees
   IMPORTANT: exclude nested folders; folders must stack (folder row + child <ul>) vertically. */
#user-trees-list .user-folder .trees > li:not(.user-folder) {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

/* User folders should NOT be flex - their children (folder span + ul) must stack vertically */
#user-trees-list .user-folder {
    display: list-item !important;
}

.trees li.tree-setting {
    justify-content: space-between;
    align-items: center;
}

.trees li.tree-setting > span {
    flex: 1 1 auto;
}

.trees li.tree-setting .overlay-toggle {
    flex: 0 0 auto;
    margin-left: 0;
    margin-right: var(--tb-spacing-sm); /* match Misc overlay-toggle; spacer margin-left gives gap to invisible checkbox */
}
.trees li.tree-setting:hover {
    background: none !important;
}

/* Only apply flex to spans in static trees, not user trees (exclude checkbox-spacer) */
#treelist > li > .trees > li > span:not(.checkbox-spacer),
.trees:not(#user-trees-list) li span:not(.checkbox-spacer) {
    flex: 1;
}

.item-button {
    margin-left: var(--tb-spacing-sm);
    padding: 2px var(--tb-spacing-sm);
    font-size: 0.8em;
    background-color: var(--tb-button-bg);
    border: 1px solid var(--tb-border-color);
    border-radius: var(--tb-border-radius);
    cursor: pointer;
}
.item-button:hover {
    background-color: var(--tb-button-hover);
}

.folder {
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.folder::before,
.folder-open::before {
    content: "";
    display: inline-block;
    width: var(--tb-icon-size);
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.folder::before {
    background-image: url("/img/treebrowser/folder-closed.svg");
}

.folder-open::before {
    background-image: url("/img/treebrowser/folder-open-little.svg");
}

.folder-disabled-open::before,
.folder-disabled-closed::before {
    content: "";
    display: inline-block;
    width: var(--tb-icon-size);
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.folder-disabled-open::before {
    background-image: url("/img/treebrowser/folder-disabled-open.svg");
}

.folder-disabled-closed::before {
    background-image: url("/img/treebrowser/folder-disabled-closed.svg");
}

.nested {
    display: none;
}
.d-checkbox {
    display: none;
}

.d-checkbox-label {
    font-size: 0.8em;
    cursor: pointer;
    user-select: none;
    color: #fff;
    padding-right: 4px;
    padding-bottom: 3px;

}
.d-checkbox-label:hover {
    color:rgb(234, 236, 243);
}

.d-checkbox:checked + .d-checkbox-label {
    color:rgb(80, 100, 172);
    /* color:rgb(132, 170, 132); */
}

.overlay-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--tb-spacing-sm);
    margin-left: 0;
    margin-right: var(--tb-spacing-sm);
    float: none;
    user-select: none;
    opacity: 0.9;
    transition: opacity 0.15s ease-in-out;
}

.overlay-toggle .toggle-label {
    font-size: 0.8em;
    color: #000;
}

.overlay-toggle .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 18px;
    flex-shrink: 0;
}

.overlay-toggle .switch input {
    display: none;
}

.overlay-toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    transform: translateY(-50%);
    background-color: var(--tb-primary-color) !important; /* ensure track color sticks */
    transition: .2s;
    border-radius: 999px;
}

.overlay-toggle .slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 0;
    top: 50%;
    transform: translate(-1px, -50%);
    background-color: white;
    transition: .2s;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border: 1px solid #b5b5b5;
}

.overlay-toggle .switch:hover .slider {
    background-color: var(--tb-primary-hover) !important;
}

.overlay-toggle input:checked + .slider {
    background-color: var(--tb-primary-color) !important;
}

.overlay-toggle .switch:hover input:checked + .slider {
    background-color: var(--tb-primary-hover) !important;
}

.overlay-toggle input:checked + .slider:before {
    transform: translate(26px, -50%);
}

.overlay-toggle:hover {
    opacity: 1;
}

.trees li .open-tree-checkbox {
    margin-left: var(--tb-spacing-sm);
    flex-shrink: 0; /* Keep checkbox fixed size; gap to right edge comes from #treelist padding */
}

.trees li span.checkbox-spacer {
    display: inline-block;
    width: var(--tb-checkbox-size);
    height: var(--tb-checkbox-size);
    margin-left: var(--tb-spacing-sm);
    flex: 0 0 var(--tb-checkbox-size);
}

.no-hover {
    display: inline-flex;
    align-items: center;
    gap: var(--tb-spacing-xs);
}

.no-hover:hover,
.toggle-label:hover {
    background: none !important;
}

#tree-browser-bottom {
    flex-shrink: 0;
}

#tree-controls {
    display: none;
    padding: var(--tb-spacing-md);
    text-align: center;
}

#tree-controls-row1,
#tree-controls-row2 {
    display: block;
    margin-bottom: 5px;
}

#tree-controls-row2 {
    margin-bottom: 0;
}

#tree-controls input[type="button"] {
    background-color: var(--tb-primary-color);
    color: white;
    border: none;
    padding: 6px 12px;
    margin: 2px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.2s;
    width: 100px;
    display: inline-block;
}

#tree-controls input[type="button"]:disabled {
    background-color: var(--tb-disabled-color);
    cursor: not-allowed;
}

#tree-controls input[type="button"]:disabled:hover {
    background-color: var(--tb-disabled-hover);
}

#tree-controls input[type="button"]:hover {
    background-color: var(--tb-primary-hover);
}

#tree-controls input[type="button"]:active {
    background-color: var(--tb-primary-active);
}

#treelist span {
    padding: 2px 0;
}

/* Tree icon for tree items - shared flex container styles */
.trees li[data-url] > span, #user-trees-list > li:not(.user-folder) > span,
#user-trees-list .user-folder .trees > li:not(.user-folder) > span, #new-moves-span {
    display: inline-flex !important; /* Must be inline-flex, not flex, to prevent full-width */
    align-items: center;
    gap: var(--tb-spacing-xs);
    flex: 1; /* Allow span to grow (drag-handle inside has flex: none so it won't grow) */
}

/* User tree spans only: allow shrink so checkbox stays in view (Small databases–style right alignment) */
#user-trees-list > li:not(.user-folder) > span,
#user-trees-list .user-folder .trees > li:not(.user-folder) > span {
    min-width: 0;
}

/* Tree icon - shared background image styles */
.trees li[data-url] > span::before,
#new-moves-span::before {
    content: "";
    display: inline-block;
    background-image: url("/img/treebrowser/tree-icon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Specific sizes for different tree types */
.trees li[data-url] > span::before,
#new-moves-span::before {
    width: 16px;
    height: 20px;
    margin-right: 3px;
    cursor: grab;
}

/* Cursor styles - pointer for text labels, move for icons */
.tree-label {
    cursor: pointer;
}


#new-moves-holder {
    padding: 5px var(--tb-spacing-md) 7px var(--tb-spacing-md);
    max-width: calc(100% - var(--tb-spacing-lg)); /* Match treelist content width (scrollbar) so checkbox aligns */
}

#new-moves-holder li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: var(--tb-spacing-lg);
}

#new-moves-holder span {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    user-select: none;
}

/* Clear button left of checkbox so checkbox aligns with other tree checkboxes */
#clear-new-moves { order: 2; }
#new-moves-checkbox { order: 3; flex-shrink: 0; }

.flat-button {
    padding: 1px var(--tb-spacing-sm);
    font-size: 11px;
    background-color: var(--tb-button-bg);
    border: 1px solid var(--tb-border-color);
    border-radius: var(--tb-border-radius);
    cursor: pointer;
    margin-left: var(--tb-spacing-sm);
}

.flat-button:hover {
    background-color: var(--tb-button-hover);
}

.flat-button.icon-button {
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    background-color: transparent;
    border: none;
}

.flat-button.icon-button:hover {
    background-color: transparent;
}

.flat-button.icon-button img {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════
   User Folders and Subfolders
   ═══════════════════════════════════════════════════════════════════ */

.user-folder > .folder {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--tb-spacing-xs);
    padding: 0; /* Override #treelist span padding */
    line-height: normal; /* Prevent double height */
}

/* User folders use a real `.drag-handle` element; hide the generic emoji-based pseudo icon */
.user-folder > .folder::before,
.user-folder > .folder.folder-open::before {
    content: "" !important;
    display: none !important;
}

.user-folder > .folder .folder-label {
    cursor: pointer;
}

.user-folder > ul {
    padding-left: var(--tb-spacing-lg);
}

/* Drag handle icons (used for dragging only) */
.drag-handle {
    display: inline-block !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* cursor: grab; */
    flex: none !important; /* Prevent flex growth - must not expand */
    padding: 0 !important; /* override broad `#treelist span { padding: ... }` */
    line-height: 0;
    margin: 0;
}

.user-folder > .folder > .drag-handle.folder-handle {
    width: 20px;
    height: 20px;
    margin-right: 3px;
    background-image: url("/img/treebrowser/folder-closed.svg");
}

.user-folder > .folder.folder-open > .drag-handle.folder-handle {
    background-image: url("/img/treebrowser/folder-open-little.svg");
}

#user-trees-list li:not(.user-folder) > span > .drag-handle.tree-handle {
    width: 16px;
    height: 20px;
    margin-right: 3px;
    background-image: url("/img/treebrowser/tree-icon.svg");
}

/* ═══════════════════════════════════════════════════════════════════
   Folder Action Buttons
   ═══════════════════════════════════════════════════════════════════ */

.folder-actions {
    display: none;
    margin-left: var(--tb-spacing-xs);
    flex-shrink: 0;
}

.user-folder:hover > .folder-actions {
    display: inline-flex;
    gap: 2px;
}

.folder-actions button {
    padding: 2px 4px;
    font-size: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    line-height: 1;
}

.folder-actions button:hover {
    opacity: 1;
}

/* Create folder button next to Custom trees */
#create-folder-btn {
    margin-left: var(--tb-spacing-xs);
    vertical-align: middle;
    opacity: 0.7;
}

#create-folder-btn:hover {
    opacity: 1;
}

#ct_user {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0; /* Allow shrink to match sibling folders (e.g. Small db); prevents #user-trees-list being 15px wider and checkboxes too far right */
}

#ct_user > .folder {
    flex: 0 0 auto;
}

#ct_user > #user-trees-list {
    flex: 0 0 100%;
    max-width: calc(100% - var(--tb-spacing-lg)); /* Match Small databases ul width so checkboxes align (ct_user flex min-content was 15px wider) */
}

/* ═══════════════════════════════════════════════════════════════════
   Inline Rename Input
   ═══════════════════════════════════════════════════════════════════ */

.inline-rename {
    font-size: inherit;
    font-family: inherit;
    font-weight: bold;
    border: 1px solid var(--tb-primary-color);
    padding: 1px var(--tb-spacing-xs);
    width: 150px;
    border-radius: var(--tb-border-radius);
    outline: none;
}

.inline-rename:focus {
    box-shadow: 0 0 3px rgba(30, 89, 37, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════
   Drag and Drop (custom pointer-based)
   ═══════════════════════════════════════════════════════════════════ */

#user-trees-list li.user-draggable {
    cursor: pointer;
}

/* Grab only on handle; labels use pointer */
.dragging {
    opacity: 0.4;
    cursor: grabbing !important;
    pointer-events: none; /* so elementFromPoint hits drop targets beneath */
}

/* Set grabbing cursor on body during drag */
body.dragging-active {
    cursor: grabbing !important;
}

/* During drag, keep grabbing everywhere over the list (override pointer/grab on items) */
#user-trees-list.dragging-active * {
    cursor: grabbing !important;
}

.drop-before {
    border-top: 2px solid var(--tb-primary-color) !important;
    margin-top: -2px;
}

.drop-after {
    border-bottom: 2px solid var(--tb-primary-color) !important;
    margin-bottom: -2px;
}

.drop-inside {
    background-color: var(--tb-primary-light) !important;
    border-radius: var(--tb-border-radius);
}

/* Prevent text selection during drag */
#user-trees-list.dragging-active {
    user-select: none;
}