/* FileShare UI · css/home.css · Home page: card panels, tree lines, status column, sorting and filters. Loaded in the order listed in index.html. */
/* ---------------------------------------------------------------- home page polish */
/* panels as separate cards with a gap between them */
@media (min-width: 1001px) {
  .workspace { padding: 10px; background: #E9EEF3; grid-template-columns: var(--left-w) 10px minmax(360px, 1fr); }
  .workspace.has-preview { grid-template-columns: var(--left-w) 10px minmax(360px, 1fr) 10px var(--preview-w); }
  .leftpanel, .center, .preview { border-radius: 12px; overflow: hidden; border: 1px solid #DDE3EA; box-shadow: 0 1px 3px rgba(16,24,40,.08); }
  .leftpanel { border-right: 1px solid #DDE3EA; }
  .workspace > .splitter-v { background: transparent; }
  .workspace > .splitter-v:hover, .workspace > .splitter-v.dragging { background: #CFE3EE; border-radius: 4px; }
}

/* folder tree: lines from each parent to its children */
.tree ul[role="group"] { position: relative; margin-left: 13px; padding-left: 13px; }
.tree ul[role="group"] > li { position: relative; }
.tree ul[role="group"] > li::before { content: ""; position: absolute; left: -13px; top: 0; bottom: 0; border-left: 1px solid #B9C4CF; }
.tree ul[role="group"] > li:last-child::before { bottom: auto; height: 15px; }
.tree ul[role="group"] > li::after { content: ""; position: absolute; left: -13px; top: 15px; width: 11px; border-top: 1px solid #B9C4CF; }
.tree .trow.selected { background: linear-gradient(90deg, #FFF3B0, #FFF8D6); box-shadow: inset 3px 0 0 #E0B000; }
.tree .tog { border-radius: 4px; }
.tree .tog:hover { background: #E8F1FB; }

/* status column: signed / stamped / indexed */
.grid th.status-col, .grid td.status-col { width: 74px; text-align: center; }
.marks { display: inline-flex; gap: 4px; align-items: center; }
.mk { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mk-off { color: #D5DBE2; }
.mk-signed { color: #1EA672; } .mk-stamped { color: #7B5CC4; } .mk-indexed { color: #2F7FD0; }

/* sortable headers and the filter row */
.grid th.sortable { cursor: pointer; user-select: none; }
.grid th.sortable:hover { background: #E6EDF4; }
.grid th.sortable .arrow { color: var(--tenant, var(--brand)); margin-left: 4px; font-size: 10px; }
.grid thead tr.sort-row th { position: sticky; top: 0; z-index: 2; }
.grid thead tr.filter-row th { position: sticky; top: 33px; z-index: 2; background: #F7F9FB; padding: 4px 6px; border-bottom: 1px solid #E3E8EE; }
.gfilter { width: 100%; box-sizing: border-box; min-width: 0; font: 12.5px Roboto, sans-serif; padding: 4px 6px; border: 1px solid #D5DCE3; border-radius: 6px; background: #fff; }
.gfilter:focus { outline: none; border-color: var(--tenant, var(--brand)); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12); }
input[type="date"].gfilter { padding: 3px 4px; }