/* Toolbar above the listing */

.browse-root {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.browse-table-wrap {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.toolbar__path {
    font-family: Consolas, Monaco, monospace;
    font-size: 0.9rem;
    color: var(--text-muted);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.toolbar__filter {
    width: 22rem;
    max-width: 100%;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
}

.toolbar__count {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Table — folders + files in a tree */

.browse-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: var(--bg);
    /* No flex:1 — tables don't reliably distribute extra height across
       rows the way flex columns do. With few rows we'd get tall rows
       that shrink as more children are loaded. The wrap div handles
       scrolling instead. */
}

.browse-table tbody tr {
    /* Pin rows to a deterministic height so table layout never
       redistributes vertical space across them. */
    line-height: 1.4;
}

.browse-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    color: var(--text);
    user-select: none;
    z-index: 1;
}

.browse-table th.sortable {
    cursor: pointer;
}

.browse-table th.sortable:hover {
    background: var(--bg-hover, #e8e8e8);
}

.sort-arrow {
    display: inline-block;
    width: 0.7rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    margin-left: 0.2rem;
}

.browse-table th.sort-asc .sort-arrow::after  { content: "▲"; color: var(--text); }
.browse-table th.sort-desc .sort-arrow::after { content: "▼"; color: var(--text); }

.browse-table tbody td {
    padding: 0.3rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.browse-table tbody tr:hover {
    background: var(--bg-hover, #f6faff);
}

/* Tree-row — name cell with indent + chevron */

.tree-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.tree-name__indent {
    flex: 0 0 auto;
}

.tree-name__chevron {
    width: 1rem;
    text-align: center;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    flex: 0 0 1rem;
    line-height: 1;
}

.tree-name__chevron--leaf { visibility: hidden; }
.tree-name__chevron::before { content: "▶"; font-size: 0.65rem; }
.tree-row.expanded > td .tree-name__chevron::before { content: "▼"; }

.tree-name__icon {
    flex: 0 0 1.1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
}

.tree-name__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.tree-name__label.is-folder {
    font-weight: 500;
}

.tree-name__label.is-file {
    cursor: pointer;
    color: var(--primary);
    text-decoration: none;
}

.tree-name__label.is-file:hover {
    text-decoration: underline;
}

/* Numeric columns right-aligned */
.col-size, .col-date {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-muted);
}

.col-ext {
    color: var(--text-muted);
    font-family: Consolas, Monaco, monospace;
    font-size: 0.85rem;
}

/* Loading row */
.tree-row--loading td {
    color: var(--text-muted);
    font-style: italic;
    padding: 0.5rem 1rem 0.5rem calc(0.75rem + 2.4rem);
}

/* When filter hides a row */
.tree-row--filtered { display: none; }