/*
 * TreeView widget styles
 */
.treeview-widget {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 13px;
    border: 1px solid #ccc;
    background: #fff;
    outline: none;
    /* user-select: none is provided by the .pgwidgets-widget rule
       in Widget.css — opt in per-instance via the standard
       allow_text_selection option / set_allow_text_selection method. */
}

/* ── Header ─────────────────────────────────────────── */

/* Clipping wrapper: matches the visible widget width and hides any
   header content that has been translated past its left edge by
   horizontal scroll. */
.treeview-header-clip {
    flex-shrink: 0;
    overflow: hidden;
    width: 100%;
}

/* The header itself is allowed to grow to the natural width of its
   columns so its grid template matches the body's. */
.treeview-header {
    display: grid;
    width: max-content;
    min-width: 100%;
    background: #f0f0f0;
    border-bottom: 1px solid #ccc;
    user-select: none;
    will-change: transform;
}

.treeview-header-spacer {
    /* empty cells matching the indent + toggle columns */
}

.treeview-header-cell {
    position: relative;
    padding: 4px 6px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    border-right: 1px solid #ddd;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.treeview-header-cell:hover {
    background: #e4e4e4;
}

.treeview-header-cell:last-child {
    border-right: none;
}

.treeview-header-label {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Header alignment.  Default is left (no override).  For 'right',
   swap layout direction so the label fills the right side of the
   cell flush with the cell's right padding — matching the data
   column's right edge — and the sort indicator appears to its left.
   For 'center', the label fills the cell with centered text. */
.treeview-header-cell.treeview-halign-center .treeview-header-label {
    text-align: center;
}
.treeview-header-cell.treeview-halign-right {
    flex-direction: row-reverse;
}
.treeview-header-cell.treeview-halign-right .treeview-header-label {
    text-align: right;
}

.treeview-sort-indicator {
    flex-shrink: 0;
    font-size: 10px;
    color: #555;
    margin-right: 6px;
}

.treeview-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
}

.treeview-resize-handle:hover {
    background: rgba(0, 0, 0, 0.12);
}

/* ── Body area (viewport + scrollbars) ─────────────── */

.treeview-body-area {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    overflow: hidden;
}

.treeview-viewport {
    grid-row: 1;
    grid-column: 1;
    overflow: hidden;
    position: relative;
}

.treeview-body {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    width: max-content;
}

.treeview-vbar {
    grid-row: 1;
    grid-column: 2;
}

.treeview-hbar {
    grid-row: 2;
    grid-column: 1;
}

.treeview-corner {
    grid-row: 2;
    grid-column: 2;
}

/* ── Row ────────────────────────────────────────────── */

.treeview-row {
    display: grid;
    align-items: center;
    min-height: 24px;
    cursor: default;
    border-bottom: 1px solid #f0f0f0;
}

.treeview-row:hover {
    background: #e8f0fe;
}

.treeview-row-alt {
    background: #fafafa;
}

.treeview-row-alt:hover {
    background: #e8f0fe;
}

.treeview-row-selected {
    background: #cce5ff !important;
}

/* ── Indent + toggle ────────────────────────────────── */

.treeview-indent {
    /* padding-left set dynamically based on depth */
}

.treeview-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    font-size: 12px;
    color: #666;
    user-select: none;
}

.treeview-toggle-active {
    cursor: pointer;
}

.treeview-toggle-active:hover {
    color: #222;
}

/* ── Cell ───────────────────────────────────────────── */

.treeview-cell {
    padding: 2px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.treeview-icon {
    display: block;
    object-fit: contain;
}

/* ── Grid-lines mode (table-style) ──────────────────── */

.treeview-widget.treeview-grid .treeview-row {
    border-bottom: 1px solid #d5d5d5;
}

.treeview-widget.treeview-grid .treeview-cell {
    border-right: 1px solid #e0e0e0;
}

.treeview-widget.treeview-grid .treeview-cell:last-child {
    border-right: none;
}

/* ── Row-number gutter ──────────────────────────────── */

.treeview-rownum-header {
    background: #e8e8e8;
    border-right: 1px solid #ccc;
}

.treeview-rownum {
    padding: 2px 4px;
    text-align: right;
    color: #666;
    background: #f4f4f4;
    border-right: 1px solid #ddd;
    user-select: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Inline cell editor ─────────────────────────────── */

.treeview-cell-editable {
    cursor: text;
}

.treeview-cell-editor {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 1px 4px;
    border: 1px solid #4a90e2;
    background: #fff;
    font: inherit;
    outline: none;
}