/*
 ==============================================================================
 Project Name    : Esyasoft.BlazorKit
 File Name       : tree-table.css
 File Purpose    : Token-driven stylesheet for hierarchical TreeTable component.
 Created By      : Anmol Manocha
 Created Date    : 2026-11-03
 ==============================================================================
 MODIFICATION HISTORY:
 Date (YYYY-MM-DD) | Modified By       | Task / CR #  | Description of Changes
 ------------------------------------------------------------------------------
 2026-11-03        | Anmol Manocha     | BLAZORKIT-02 | Created token-driven stylesheet for TreeTable.
 ------------------------------------------------------------------------------
*/

.uuc-treetable-wrap {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--uuc-btn-radius-lg, 8px);
    overflow: hidden;
    box-sizing: border-box;
}

.uuc-treetable-container {
    width: 100%;
    overflow-x: auto;
}

.uuc-treetable {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--uuc-font-primary, sans-serif);
    font-size: var(--uuc-font-size-caption, 12px);
    line-height: var(--uuc-line-height-caption, 1.45);
}

.uuc-treetable th {
    background: #f8fafc;
    color: #475569;
    font-weight: var(--uuc-font-weight-semibold, 600);
    padding: 8px 12px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
    user-select: none;
    font-size: 11.5px;
    letter-spacing: 0.01em;
}

.uuc-treetable td {
    padding: 7px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    vertical-align: middle;
}

.uuc-treetable-row {
    transition: background-color 0.12s ease;
    cursor: pointer;
}

.uuc-treetable-row:hover {
    background-color: #f8fafc;
}

.uuc-treetable-row:focus-visible {
    outline: 2px solid var(--uuc-color-primary, #0284c7);
    outline-offset: -2px;
}

.uuc-treetable-row.selected {
    background-color: #eff6ff;
}

.tree-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.btn-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: 0;
    color: #64748b;
    cursor: pointer;
    border-radius: var(--uuc-btn-radius-sm, 4px);
    font-size: 11px;
    transition: background-color 0.12s ease, color 0.12s ease;
    flex-shrink: 0;
}

.btn-tree-toggle:hover {
    background-color: #e2e8f0;
    color: #0f172a;
}

.btn-tree-toggle:focus-visible {
    outline: 2px solid var(--uuc-color-primary, #0284c7);
    outline-offset: 1px;
}

.tree-spacer {
    display: inline-block;
    width: 18px;
    flex-shrink: 0;
}

.uuc-treetable-empty {
    text-align: center;
    color: #94a3b8;
    padding: 32px 16px;
    font-style: italic;
}