ZDDC/browse/css/tree.css

/* 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;
}

/* Breadcrumb path. The root node is a 🏠 link to "/" (online) or
   the FS handle name (offline). Each segment is a clickable link in
   server mode that re-navigates the browser; in FS-API mode they
   render as plain spans because we don't keep ancestor handles. */
.breadcrumbs {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    font-family: Consolas, Monaco, monospace;
    font-size: 0.9rem;
    color: var(--text-muted);
    padding: 0.1rem 0;
    /* Hide the scrollbar but keep horizontal scroll for very deep paths */
    scrollbar-width: thin;
}

.breadcrumbs .bc-link {
    color: var(--primary);
    text-decoration: none;
    padding: 0.1rem 0.25rem;
    border-radius: 3px;
}

.breadcrumbs .bc-link:hover {
    background: var(--bg-hover, rgba(0,0,0,0.05));
    text-decoration: underline;
}

.breadcrumbs .bc-link--current {
    color: var(--text);
    font-weight: 500;
    cursor: default;
}

.breadcrumbs .bc-link--current:hover {
    background: transparent;
    text-decoration: none;
}

.breadcrumbs .bc-sep {
    color: var(--text-muted);
    margin: 0 0.05rem;
}

.breadcrumbs .bc-root {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.bc-home-icon {
    width: 1rem;
    height: 1rem;
    display: block;
    color: currentColor;
}

.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);
}