/* 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 {
    font-size: 1rem;       /* the 🏠 emoji renders a hair bigger */
    line-height: 1;
}

.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__ext {
    /* Multi-select extension filter. Native <select multiple> is
       intentionally compact — most folders have a small set of
       extensions, and we surface the list dynamically from the
       loaded view. */
    min-width: 8rem;
    max-width: 14rem;
    height: auto;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.85rem;
    font-family: Consolas, Monaco, monospace;
}

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

/* Subtle button variant — used for "Select Directory" when the page
   is server-backed (the user usually doesn't need to switch to a
   local folder; we keep the option visible but quiet). */
.btn.btn--subtle {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border);
    box-shadow: none;
    font-weight: normal;
}

.btn.btn--subtle:hover {
    color: var(--text);
    background: var(--bg-hover, rgba(0,0,0,0.04));
}

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