/* No files message */ .noFilesMessage { display: flex; justify-content: center; align-items: center; padding: 60px 20px; color: var(--color-gray); font-style: italic; font-family: var(--font-family); } /* Files table container */ .filesTable { width: 100%; margin-top: 10px; display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; overflow: hidden; } /* Table header with exact grid positioning */ .tableHeader { display: grid; grid-template-columns: 45% 15% 15% 25%; align-items: center; height: 40px; padding: 0px 16px; position: sticky; top: 0; z-index: 10; background-color: var(--color-bg); border-bottom: 1px solid var(--color-gray-disabled); margin-bottom: 10px; flex-shrink: 0; } /* Header cells with exact positioning */ .headerCell { display: flex; align-items: center; font-weight: 500; font-size: 14px; color: var(--color-text); cursor: pointer; white-space: nowrap; padding-left: 0; transition: color 0.2s ease; font-family: var(--font-family); } .headerCell:hover { color: var(--color-primary); } /* Adjust first column for icon space */ .headerCell:nth-child(1) { padding-left: 30px; } /* Simple sort icon styling */ .sortIcon { margin-left: 6px; font-size: 14px; color: var(--color-gray); transition: color 0.2s ease; } .headerCell:hover .sortIcon { color: var(--color-primary); } /* File list styling */ .filesList { list-style: none; padding: 0; margin: 0; width: 100%; overflow-y: auto; flex: 1; min-height: 0; } /* Override the flex layout in DateienItem to force matching the header */ .filesList li { display: grid !important; grid-template-columns: 45% 15% 15% 25%; border-bottom: 1px solid var(--color-gray-disabled); height: 60px; padding: 0 16px; align-items: center; transition: background-color 0.2s ease; position: relative; } .filesList li:hover { background-color: var(--color-surface); }